为什么在 setTimeout 函数中看不到 for 循环中定义的变量？

Question

当我在控制台中运行以下代码时：

for(var k = 0; k < 36; k++){
    setTimeout(function(k){ alert(k)}, k*5000);
}

警报显示未定义。此外，我希望每次迭代后超时功能的延迟都会增加；但这不会发生。超时功能应先在 5 秒后运行，然后在 10 秒后运行，然后在 15 秒后运行，以此类推。

为什么每次迭代后都会发出 undefined 警报，为什么延迟没有增加？

由于k在timeout函数的本地范围内，所以在里面应该是可见的。

Answer 1

它是undefined，因为计时器机制setTimeout 将函数挂钩到不调用您提供给它的任何参数的函数（默认情况下），并且您已将k 声明为函数参数。当你调用一个参数少于它声明的参数的 JavaScript 函数时，这些参数的值是undefined。所以参数 k 隐藏（隐藏）循环变量 k，而你总是看到undefined。

要修复它，不要将k 声明为函数参数：

for (var k = 0; k < 36; k++){
    setTimeout(function(){ alert(k)}, k*5000);
    // No k here -------^
}

示例（使用 500 而不是 5000）：

for (var k = 0; k < 36; k++){
    setTimeout(function(){ console.log(k)}, k*500);
    // No k here -------^
}

但是，那么您将不得不解决一个新问题 (the one addressed by this question and its answers)：所有这些回调看到的 k 的值将是相同 (36)，因为他们看到 k 的值是在它们被调用时（稍后，一旦循环结束），而不是在它们被创建时。

在 ES5 及更早版本中，我会这样解决：

function createHandler(k) {
    return function(){ alert(k)};
}
for (var k = 0; k < 36; k++){
    setTimeout(createHandler(k), k*5000);
}

例子：

function createHandler(k) {
    return function(){ console.log(k)};
}
for (var k = 0; k < 36; k++){
    setTimeout(createHandler(k), k*500);
}

...虽然很多人会在循环中重复创建 createHandler 函数：

for (var k = 0; k < 36; k++){
    setTimeout(function(innerk) {
        return function() { alert(innerk); }
    }(k), k*5000);
}

例子：

for (var k = 0; k < 36; k++){
    setTimeout(function(innerk) {
        return function() { console.log(innerk); }
    }(k), k*500);
}

在 ES2015+（“ES6”及更高版本）中，我会这样解决：

for (let k = 0; k < 36; k++){
    setTimeout(() => { alert(k); }, k*5000);
}

...因为当您像这样在for 中使用let 时，它会为每次迭代创建一个新的k，其值不会改变。

例子：

// REQUIRES ES2015+ SUPPORT
for (let k = 0; k < 36; k++){
    setTimeout(() => { console.log(k); }, k*500);
}

Answer 2

您可以通过两种方式传递k 参数：

for(var k = 0; k < 36; k++){
    setTimeout(function(k){ alert(k); }, k * 5000, k); // but is not supported in IE9 and earlier
}

或者更好地将其包装到函数调用中：

for (var k = 0; k < 36; k++) _setTimeout(k);

function _setTimeout(k) {
    setTimeout(function(){ alert(k); }, k * 5000);
}

Answer 3

您将 k 传递给 setTimeOut 的回调函数，但它什么都不带。因此删除参数 k 将起作用。

for(var k = 0; k < 36; k++){
setTimeout(function(){ alert(k)}, k*5000);
}