具有在运行时更改的参数的超时函数

Question

我正在尝试以下方法：

var timeout = 300;
var colors = ['aqua', 'limegreen']
for (var i=0; i < 4; ++i) {
    console.log(colors[i % colors.length]);
    setTimeout(function() { changeColor(colors[i % colors.length]) }, i * timeout);
}

function changeColor(color) {
    console.log(color);
}

这不起作用，因为 changeColor 的参数在执行时已解析...这意味着颜色将始终相同。在我的 chrome 中，超时后传递参数也不起作用：

var color = colors[i % colors.length];
setTimeout(function() { changeColor() }, i * timeout, color);

好吧，我现在有一个有效的间隔解决方法......但是因为我在这里学习......如何在超时的情况下完成？

Answer 1

调用changeColor的匿名函数将在for循环结束时执行。所以它将等于它获得的最后一个值。为了防止这种情况，通过使用匿名函数包装对 setTimeout 的调用，在闭包中捕获您需要的值：

for (var i=0; i < 4; ++i) {
    console.log(colors[i % colors.length]);
    (function(i){
        setTimeout(function() { changeColor(colors[i % colors.length]) }, i * timeout);
    })(i);    
}

Answer 2

您遇到了关闭问题；已捕获对 i 值的引用，因此所有函数都包含相同的值。您需要执行以下操作以在调用时捕获i 的引用：

 for(var i = 0; i < 4; i++)
 {
      (function(index)
      {
          setTimeout(function()
          {
              changeColor(colors[index & colors.length]);
          }, index * timeout);
      })(i)
 }