javascript - 澄清 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

标签： javascriptfor-loopwhile-loopsettimeout

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