Timer function alteration

**olliepop** · 09-25-2010, 09:49 AM

Hey everyone i'm new to the community, hello

The function discussed in this thread is at the bottom of this post.

What this function does is countdown the value of an HTML table-cell to zero (minus 1 every second) then stop counting that specific cell when it's finished. This works perfectly, the problem is that when it is called AGAIN for a different table-cell, the previous cell starts reducing its value by 2 every second instead of 1. This function supports the Hour:Minute:Second format.

So, how would i make this function so that i can call an infinite number of different table cells, and the previous table cells timers would not be affected (they would still countdown 1 per second as they should)?

Thank you so much. I have been stuck on this problem for 2 weeks and just left my project dormant because of it. This simple problem has struck me from behind and destroyed my passion for the project - please help me get back on track!

-Ollie

This is the code which CALLS the function, where $i is 1-5 inclusive, defined by PHP:

Code:

timer('ff".$i."', ". rand(1,100) .");

This is the BODY of the function itself, called by the above command

Code:

var running = new Array(50);
function timer(data, id)
{
    //clearTimeout(id[data]);
    var id=new Array(50);
    // usage: var id=new Array(50); timer('cq0');
    dat=document.getElementById(data);
    var time=(dat.innerHTML).split(":"); 
    var done=0;
    if(dat.innerHTML == null) {
        done = 1;
        alert('null');
    }
    if (time[2]>0) time[2]--;
    else
    {
        time[2]=59;
        if (time[1]>0) time[1]--;
        else
        {
            time[1]=59;
            if (time[0]>0) time[0]--;
            else { 
            clearTimeout(id[data]); 
            done=1;
            running[data] = 0;
            renderStack();
            }
            
        }
        
    }
    if (!done)
    {
        dat.innerHTML=time[0]+":"+time[1]+":"+time[2];
        id[data]=setTimeout("timer('"+data+"')", 1000);
        running[data] = 1;
    }
}

**vwphillips** · 09-25-2010, 11:50 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/


function timer(id){
 var obj=document.getElementById(id);
 if (!obj.tick){
  obj.tick=new Tick(obj);
 }
 obj.tick.time=(obj.innerHTML).split(":");
 obj.tick.tick()
}

function Tick(obj){
 this.done=0;
 this.obj=obj;
 if(obj.innerHTML == null) {
  this.done = true;
  alert('null');
 }
 }

Tick.prototype.tick=function(){
 clearTimeout(this.to);
 if (this.time[2]>0){
  this.time[2]--;
 }
 else{
  this.time[2]=59;
  if (this.time[1]>0){
   this.time[1]--;
  }
  else {
   this.time[1]=59;
   if (this.time[0]>0){
    this.time[0]--;
   }
   else {
    clearTimeout(this.to);
    this.done = true;
    this.running =false;
   }
  }
 }
 if (!this.done){
  var oop=this;
  this.obj.innerHTML=this.time[0]+":"+this.time[1]+":"+this.time[2];
  this.to=setTimeout(function(){ oop.tick(); }, 1000);
  this.running=true;
 }
}

/*]]>*/
</script></head>

<body>
<div id="tst" >2:2</div>
<div id="tst1" >2:2</div>
<input type="button" name="" value="Test" onclick="timer('tst'); return false"/>
<input type="button" name="" value="Test" onclick="timer('tst1'); return false"/>
</body>

</html>

**olliepop** · 09-25-2010, 01:11 PM

Thank you so much. Worked like a charm!

**olliepop** · 09-25-2010, 02:10 PM

Hey quick question vwphillips or anyone else if you don't mind;

how would i go about destroying each instance of timer manually?

Thread: Timer function alteration

Thread Tools

Search Thread

Timer function alteration

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions