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

Question

我无法理解为什么答案是 9。根据我的理解，将setTimeout function 添加到 for 循环中意味着setTimeout function 将为每个循环运行 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 秒后执行。 它仍然在您的 function 的 scope 中触发，但在结束时，延迟 1 秒。 在您的 function 结束时， 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放入 function 并将i传递给它。 这样， i是什么并不重要，因为我们使用的是新的 function 范围内的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);
}