javascript - 如何将变量传递给 setTimeout 函数？

Question

我正在尝试设置五个交错的函数调用(相隔一秒)。那部分工作正常。不起作用的是，我无法将值 0 到 4 传递给回调函数。它每次都只是通过'5'。我似乎无法弄清楚为什么以及如何解决它。

代码:

​function callback(num)
{
    console.log(num);
}

for (var i = 0, loadDelay = 1000; i < 5; ++ i, loadDelay += 1000)
    setTimeout(function() { callback(i); }, loadDelay);

结果:

5
5
5
5
5

期望的结果:

0
1
2
3
4

Answer 1

那是因为你创建了一个闭包。因此，您传递给 setTimeout 的函数共享相同的 i 实例。在支持标准(非 IE)的浏览器中，您可以:

setTimeout(callback, loadDelay, i);

参见: http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers

否则你必须实际绑定(bind)函数的参数:

setTimeout(callback.bind(undefined, i), loadDelay);

参见: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

如果浏览器不支持 ES5 bind 方法，您可以实现上面链接中的 shim，或者手动执行以下操作:

setTimeout(function(index){
    return function() { callback(index) }
}(i), loadDelay);

但我会说使用 bind 可读性更强，并且值得实现 shim。你实际上可以使用这个:https://github.com/kriskowal/es5-shim

在 native 不支持 es5 的浏览器中添加 es5 功能(如果可能)。