JavaScript clearTimeout issue on Chrome

Question

I have a timer going on my page at an interval of 10s. It is created using setTimeout("myWork()", 10000). It works perfectly. At some point in time based on some conditions, I clear this interval and create a new one that has to tick at 1s interval.

var tenSecTimer = 0;

if (myCondition)
{
  clearTimeout(tenSecTimer);
  tenSecTimer = setTimeout("myWork()", 1000);
}

This whole process works fine on all versions of IE and FireFox. When I have this page opened in Chrome (6.0), then ticker stops working after clearTimeout gets called. It never recognizes 1s timer.

Something I am missing for latest chrome?

Thanks

Answer 1

I doubt this would fix it but have you tried passing the reference instead of a string to be evaluated?

setTimeout( myWork, 1000)

Answer 2

I'm not sure what the rest of your code looks like, but you might be better off using setInterval() instead of setTimeout(). The signature pattern is the same, but setInterval takes care of the repeats automatically.

Answer 3

Why not use this?

var tenSecTimer = 0;

if (myCondition) {
    clearTimeout(tenSecTimer);
    tenSecTimer = setTimeout(function () {
        myWork();
    }, 1000);
}

Note: it's passing in a function, that then executes the myWork function. Using a string for setTimeout or setInterval is bad as it then calls eval (which is slow, and has other issues).

Source (scroll all the way to the bottom)

Answer 4

Not an answer but complete code which exhibits the same behaviour:

(function () {
var counter = 0;

function testCounter() {
  if (counter === 2) {
    clearInterval (timer);
    timer = setInterval (myWork, 1000);
  } 

  else if (counter === 5)
    clearInterval (timer);
}

function myWork () {
  document.body.innerHTML += ++counter + ' ' + Date () +'<br/>';
}

document.body.innerHTML += 'Starting ' + Date () +'<br/>';
var timer = setInterval (myWork, 10000);
setInterval (testCounter, 500);
}) ();

This code displays :

Starting Thu Sep 30 2010 16:15:09 GMT+0200 (CEST)
1 Thu Sep 30 2010 16:15:19 GMT+0200 (CEST)
2 Thu Sep 30 2010 16:15:29 GMT+0200 (CEST)

and no more, if I remove the setInterval on testCounter and call it inside myWork I get the following :

Starting Thu Sep 30 2010 16:20:50 GMT+0200 (CEST)
1 Thu Sep 30 2010 16:21:00 GMT+0200 (CEST)
2 Thu Sep 30 2010 16:21:10 GMT+0200 (CEST)
3 Thu Sep 30 2010 16:21:11 GMT+0200 (CEST)
4 Thu Sep 30 2010 16:21:12 GMT+0200 (CEST)
5 Thu Sep 30 2010 16:21:13 GMT+0200 (CEST)

Very curious.....

Answer 5

I think I have solved the mystery of the problem. Taking cue from Han's comments, I realized what the actual code was doing. I have a 1s clock timer that generated the condition for clearing 10s timer and then initiating 1s timer for "myWork". Before call back for 1s timer got called, another clock tick occured. Now that cleared the timer that was waiting for "myWork" to be called. So it pretty much got into a never ending cycle. It seems that Chrome's timer has become way too efficient :-) the key to solving this problem is either I set the timer for "myWork" to be less than 1s or have a state machine that will make sure that timer is not cleared before it has been executed.