译者：嘴里起了个泡
原文地址：
这篇文章详细介绍了JS在执行for循环里面的 setTimeout() 语句的时候发什么了什么。这是面试中经常会被问到的一个问题，因为这个问题的答案涉及到了几个JS的核心知识点：，和。
For循环
For循环是JS开发中经常使用的。它会一直运行直到其中的判断条件为false。一个For循环包含三个分句：一个初始化表达式，一个条件表达式和一个更新表达式。
for (var i = 1; i < 5; i++) { console.log(i); // 1 2 3 4}复制代码 现在我们的三个分句如下：
- 初始化：
var i = 1 - 条件：
i < 5 - 更新：
i++
需要注意的是在这个for循环结束的时候，变量i的值实际上是5，不是4。我们从初始化开始，每次i递增1，然后检查i是否满足条件。换句话说，我们会按照1，3，2的顺序执行这三个分句，尽管逻辑上会认为它们应该按顺序执行。
for循环里实际发生了什么： - 第一步：
i值为1，增加到2，检查2 < 5?满足条件，所以打印输出。 - 第二步：
i值为2，增加到3，检查3 < 5?满足条件，所以打印输出。 - 第三步：
i值为3，增加到4，检查4 < 5?满足条件，所以打印输出。 - 第四步：
i值为4，增加到5，检查5 < 5?不满足条件，终止循环。 现在我们清楚了，为什么i最终等于5，但是却只打印出来了1-4。我们可以通过下面代码来证明这点。
for (var i = 1; i < 5; i++) { console.log(i); // 1 2 3 4}console.log("The value of i is now: ", i); // "The value of i is now: 5"复制代码 闭包
关键字Var的作用域是函数范围内，意味着它位于一个封闭的函数中。但我们上面的例子中并没有函数，所以它的作用域就是全局。也就是说，上面的for循环创建了一个全局变量i。
var的作用域是函数范围内，那么i的作用域就会被设置到离它最近的函数中。在这个例子中，它将会是全局变量。 setTimeout
如果我们想在循环中每秒输出一次应该怎么做呢？我们会想当然的认为只要添加一个setTimeout方法就能达到这个效果。
for (var i = 1; i < 5; i++) { setTimeout(() => console.log(i), 1000) // 5 5 5 5}复制代码 事与愿违！！！为什么没有输出1 2 3 4呢？在这个微妙的例子中实际上发生了很多事情。
for循环先执行掉了，然后再去寻找i的值，发现是5，然后把它打印了四次，每个循环打印一次。 即使我们把循环的时间间隔设置成0，结果还是一样的。 for (var i = 1; i < 5; i++) { setTimeout(() => console.log(i), 0) // 5 5 5 5}复制代码 我相信你对此肯定很疑惑。不用担心：你很快就会知道这到底是怎么回事了。
JavaScript 运行引擎
JavaScript是单线程单一并发语言，这意味着它一次只能处理一个任务或一段代码。让我们接着看： 所以我们如何用它写出异步的代码呢，就比如上面例子中的setTimeout()？ 答案是JavaScript运行在浏览器中，浏览器做了很多事情不仅仅是执行代码这么简单。事实上，浏览器需要考虑这四个部分：
- JavaScript运行时引擎
- 浏览器提供的Web APIs，比如
DOM,setTimeout等等 - 具有回调函数（如onClick和onLoad）的事件的回调队列
- 事件循环
下面这个图片来自视频里的截图：
运行引擎执行我们的代码，每个浏览器都有一个稍微不同的引擎。例如，Chrome使用引擎，这也恰好为NodeJs提供支持。该引擎一次只能执行一段代码。
Web APIs是浏览器提供给我们的，其中包含了像setTimeout()这种方法。如果你在浏览器的控制台把window打印出来，你会看到一个很长很长的默认的API列表。 for循环和 setTimeout的例子中是如何一起运行工作的。 闭包
setTimeout可以通过闭包拿到i的值。我们把i放在console.log语句里，但是i的值却被设置在外面一层的封闭范围内，即for循环里。既然内部函数可以拿到外部函数的变量，我们就能去for循环里取到i的值，即5。