JS 破坏性赋值 - 为什么它会这样工作？ [复制]答案

【问题标题】：JS destructive assignment - why does it work like this? [duplicate]JS 破坏性赋值 - 为什么它会这样工作？ [复制]
【发布时间】：2020-06-08 01:53:48
【问题描述】：

for (var i = 1; i < 5; i++) {
  console.log(i);
  setTimeout(function() {
    console.log(i);
  }, 3000)
};

首先，此代码显示从 1 到 4 的数字，三秒后显示四个五。这不是一个明显的动作顺序。我想输出应该是这样的：

1 //pause 3s
1
2 //pause 3s
2
3 //pause 3s
3
4 //pause 3s
4

我需要了解 JS 解释器的哪些内容才能给出正确答案？问题根本不是关于闭包的

【问题讨论】：

你对i有一个关闭。延迟调用采用它的最后一个值。
似乎 setTimeout 函数是 .阻塞，因此事件循环在完成之前不会继续。
第一个 1 2 3 4 基于 for 循环内的日志。剩余的四个 5 是从循环启动的 setTimeout 打印出来的。
“这不是一个明显的动作序列”，是的。 setTimeout 不会阻塞，循环在第一次超时执行之前完成。那时变量值已经增长到 5。此外，所有超时都是在不到一毫秒的时间内在循环中按顺序设置的，因此它们几乎会同时触发，因为它们设置了相同的延迟。
@Teemu，感谢您的仔细阅读和您的回答。是的，这是一个不清楚的关键点

【解决方案1】：

setTimeout 延迟函数调用，它不会让实际程序进入睡眠状态。这是一个异步方法，如果你想暂停你的应用程序 - 这样做：

for (var i = 1; i < 5; i++) {
  console.log(i);
  sleep(3000);
  console.log(i);
};

【讨论】：

请注意，大多数浏览器不支持sleep ...如果您不想进行polyfill，请查看这篇文章sitepoint.com/delay-sleep-pause-wait

【解决方案2】：

你可以使用你的索引来控制setTimeout的时间：

for (var i = 0; i < 4; i++) {
  setTimeout(function(ii) {
    console.log(ii);
  }.bind(0, i+1), i*1000)
};

【讨论】：