How to trace in the console how many intervals are being executed - JavaScript

Question

I have a problem trying to know if a setInterval() is taking place or it was killed. I am creating an interval and saving it into a variable:

interval = setInterval('rotate()',3000);

Then on click to an element I stop the interval and wait 10 seconds before starting a new one, by the way the variable interval is global:

$(elm).click(function(){

  clearInterval(interval);
  position = index;

  $('#banner div').animate({
    'margin-left':position*(-img_width)
  });

  setTimeout('startItnerval()',10000);


});

function startItnerval(){

    interval = setInterval('rotate()',3000);

}

It seems to work but eventually I can realize that there are intervals still being in place, everytime I start a new interval it is saved in the interval variable, which is global, so in theory even if I start 100 intervals they are all saved in the same variable replacing the previous interval right? So I should only have one instance of interval; then on clearInterval(interval); it should stop any instance.

After looking at the results, apparently even if it is saved in the same variable, they are all separate instances and need to be killed individually.

How can I trace how many intervals are being executed, and if possible identify them one by one? even if I am able to solve the problem I really would like to know if there is a way to count or show in the console how many intervals are being executed?

thanks

Answer 1

jsFiddle Demo

As pointed out in comments, the id's constantly increase as timers are added to a page. As a result, it may be possible to clear all timers running on a page like this:

function clearTimers(){
 var t = window.setTimeout(function(){
  var idMax = t;
  for( var i = 0; i < idMax; i++ ){
   window.clearInterval(i);
   window.clearTimeout(i);
  }
 },4);
}

---

The reason that you can only see one interval is because every time you start a new interval, you overwrite the value in interval. This causes the previous intervals to be lost but still active.

A suggestion would be to just control access to your variable. Clearly there is an issue where the start function is called too often

clearInterval(interval);//when you clear it, null it
interval = null;

and then take advantage of that later

if( interval != null ){
 interval = setInterval('rotate()',3000);
}

Also, as Pointy noted in a comment, using a string to call a function is not best practice. What it basically does is converts it into a Function expression which is similar to using eval. You should probably either use the function name as a callback

setInterval(rotate,3000);

or have an anonymous function issue the callback

setInterval(function(){ rotate(); },3000);