澄清 setTimeout 和 forloop 交互的工作原理

Question

我很难理解为什么答案是9。据我了解，将setTimeout函数添加到 for 循环中意味着setTimeout函数将为每个循环运行 3 次。所以它循环 3 次，在每个循环中，setTimeout运行 3 次，总共 9 次？我缺少理解。

var result = 0;
for (var i = 0; i < 3; i++) {
setTimeout(function() {
result += i;
}, 1000);
}
console.log(result) // answer is 9

Answer 1

Javascript是一个单线程系统。setTimeout基本上将您的请求放在调用堆栈上，以便在 1 秒后执行。 它仍然在您的函数范围内触发，但在函数结束时，延迟 1 秒。 在函数结束时，i === 3并且由于您执行了 3 次，因此您将获得result === 9

如果这样做，您可以更清楚地看到这一点：

var result = 0;
for (var i = 0; i < 3; i++) {
setTimeout(function() {
result += i;
console.log("i: " + i);
console.log("result: " + result)
}, 1000);
}

您可以结束超时，以打破对i的依赖。 为此，请将setTimeout放在函数中并将i传递到函数中。这样，i是什么并不重要， 因为我们使用的是j它的作用域在新函数内。

var result = 0;
for (var i = 0; i < 3; i++) {
(function(j){ 
setTimeout(function() {
result += j;
console.log("i: " + i);
console.log("j: " + j);
console.log("result: " + result)
}, 1000);
})(i);
}