PDA

View Full Version : Resolved 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:

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


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

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
<!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?