Question

I want to use setInterval to animate a couple things. First I’d like to be able to specify a series of page elements, and have them set their background color, which will gradually fade out. Once the color returns to normal the timer is no longer necessary.

So I’ve got

function setFadeColor(nodes) {
  var x = 256;
  var itvlH = setInterval(function () {
    for (i in nodes) {
      nodes[i].style.background-color = "rgb(0,"+(--x)+",0);";
    }
    if (x <= 0) {
      // would like to call 
      clearInterval(itvlH);
      // but itvlH isn't in scope...?
    }
  },50);
}

Further complicating the situation is I’d want to be able to have multiple instances of this going on. I’m thinking maybe I’ll push the live interval handlers into an array and clean them up as they “go dead” but how will I know when they do? Only inside the interval closure do I actually know when it has finished.

What would help is if there was a way to get the handle to the interval from within the closure.

Or I could do something like this?

function intRun() {
  for (i in nodes) {
    nodes[i].style.background-color = "rgb(0,"+(--x)+",0);";
  }
  if (x <= 0) {
    // now I can access an array containing all handles to intervals
    // but how do I know which one is ME?
    clearInterval(itvlH);
  }
}
var handlers = [];
function setFadeColor(nodes) {
  var x = 256;
  handlers.push(setInterval(intRun,50);
}

Answer 1

I’ve used code like your first block, and it works fine. Also this jsFiddle works as well.