javascript - setInterval 覆盖其他 setIntervals

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我试图创建多个 setIntervals 并存储它们(稍后清除)，但是当我这样做时，最后一个 setInterval 会覆盖前一个，为每个前一个 setInterval 执行一次，但内容相同。

具有奇怪行为的代码片段:

var timeoutFunctions= {};

function log_on_console(text){
  console.log(' > > > inside function : '+text)
}

$( document ).ready(function() {
    for (i = 0; i < 5; i++) {
      console.log(' > > > before function : '+i)
      timeoutFunctions[i] = setInterval(function(){log_on_console(i)}, 2000);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

控制台的输出是:

" > > > before function : 0" js:21:6
" > > > before function : 1" js:21:6
" > > > before function : 2" js:21:6
" > > > before function : 3" js:21:6
" > > > before function : 4" js:21:6

" > > > inside function : 5" (5) js:16:2 //(this one is the "problem")

我本来期待这样的事情:

" > > > before function : 0" js:21:6
" > > > before function : 1" js:21:6
" > > > before function : 2" js:21:6
" > > > before function : 3" js:21:6
" > > > before function : 4" js:21:6

" > > > inside function : 0" js:16:2 
" > > > inside function : 1" js:16:2 
" > > > inside function : 2" js:16:2 
" > > > inside function : 3" js:16:2 
" > > > inside function : 4" js:16:2 

那么，为什么是最后一个setInterval(function(){log_on_console(i)}, 2000)覆盖前四个？

Answer 1

这里的函数:

timeoutFunctions[i] = setInterval(function(){log_on_console(i)}, 2000);

...对 i 变量有一个持久引用，而不是创建函数时其值的副本。因此它使用 i 被调用时的值。

如果您想在创建函数时将 i 的值刻录到函数中，您可以使用 Function#bind :

timeoutFunctions[i] = setInterval(function(val){log_on_console(val)}.bind(null, i), 2000);

或更直接地作为您的匿名函数，只需调用log_on_console:

timeoutFunctions[i] = setInterval(log_on_console.bind(null, i), 2000);

Function#bind 返回一个函数，该函数在被调用时将调用原始函数，并将 this 设置为您为 bind 提供的第一个参数，并传递任何其他参数。由于您的函数没有使用 this，因此我只是使用 null 作为该参数。例如:

function foo(a) {
    console.log("a = " + a);
}
var f = foo.bind(null, 1);
f();

向我们展示:

a = 1

<小时/>

旁注:您的代码正在成为 The Horror of Implicit Globals 的牺牲品因为您没有在任何地方声明 i。