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

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

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

Answer 2

当for循环结束时，将执行调用changeColor的匿名函数。所以它将等于它获得的最后一个值。要通过使用匿名函数包装对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);    
}

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

2 个答案: