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

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