creating a timer using setInterval that can clean up after itself?

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 setF开发者_开发知识库adeColor(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);
}

Your first example will work fine and dandy ^_^

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) {
      clearInterval(itvlH);
      // itvlH IS in scope!
    }
  },50);
}

Did you test it at all?

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

I think you could use a little trick to store the handler. Make an object first. Then set the handler as a property, and later access the object's property. Like so:

function setFadeColor(nodes) {
  var x = 256;
  var obj = {};

  // store the handler as a property of the object which will be captured in the closure scope
  obj.itvlH = setInterval(function () {
    for (i in nodes) {
      nodes[i].style.background-color = "rgb(0,"+(--x)+",0);";
    }
    if (x <= 0) {
      // would like to call 
      clearInterval(obj.itvlH);
      // but itvlH isn't in scope...?
    }
  },50);
}

You can write helper function like so:

function createDisposableTimerInterval(closure, delay) {
    var cancelToken = {};
    var handler = setInterval(function() {
        if (cancelToken.cancelled) {
            clearInterval(handler);
        } else {
            closure(cancelToken);
        }
    }, delay);
    return handler;
}

// Example:

var i = 0;
createDisposableTimerInterval(function(token) {
    if (i < 10) {
        console.log(i++);
    } else {
        // Don't need that timer anymore
        token.cancelled = true;
    }
}, 2000);