javascript - 使用 setInterval 创建一个可以自行清理的计时器？

Question

我想使用 setInterval 来制作一些动画。首先，我希望能够指定一系列页面元素，并让它们设置它们的背景颜色，这些颜色会逐渐淡出。一旦颜色恢复正常，就不再需要计时器了。

所以我有

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);
}

使情况更加复杂的是我希望能够有多个这种情况发生。我在想，也许我会把实时间隔处理程序插入一个数组，并在它们“死掉”时清理它们，但我怎么知道它们什么时候死了？只有在间隔闭包内我才真正知道它何时结束。

如果有一种方法可以从闭包中获取间隔的句柄，那将会有所帮助。

或者我可以做这样的事情？

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

你的第一个例子会很好用 ^_^

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);
}

你测试过吗？