JavaScript同步、异步、回调执行顺序之setTimeout面试题分析

同步、异步、回调执行顺序？

同步 => 异步 => 回调

这口诀有什么用呢？用来对付面试。

有一道经典的面试题：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log('i: ',i);
    }, 1000);
}
 
console.log(i);
 
//输出
5
i:  5
i:  5
i:  5
i:  5
i:  5


1、for循环和循环体外部的console是同步的，所以先执行for循环，再执行外部的console.log。（同步优先）

2、for循环里面有一个setTimeout回调，他是垫底的存在，只能最后执行。（回调垫底）

那么，为什么我们最先输出的是5呢？

非常好理解，for循环先执行，但是不会给setTimeout传参（回调垫底），等for循环执行完，就会给setTimeout传参，而外部的console打印出5是因为for循环执行完成了。

这里涉及到JavaScript执行栈和消息队列的概念，概念的详细解释可以看阮老师的 JavaScript 运行机制详解:再谈Event Loop – 阮一峰的网络日志，或者看 并发模型与Event Loop

我拿这个例子做一下讲解，JavaScript单线程如何处理回调呢？

JavaScript同步的代码是在堆栈中顺序执行的，而setTimeout回调会先放到消息队列，for循环每执行一次，就会放一个setTimeout到消息队列排队等候，当同步的代码执行完了，再去调用消息队列的回调方法。

在这个经典例子中，也就是说，先执行for循环，按顺序放了5个setTimeout回调到消息队列，然后for循环结束，下面还有一个同步的console，执行完console之后，堆栈中已经没有同步的代码了，就去消息队列找，发现找到了5个setTimeout，注意setTimeout是有顺序的。

那么，setTimeout既然在最后才执行，那么他输出的i又是什么呢？答案就是5。。有人说不是废话吗？

现在告诉大家为什么setTimeout全都是5，JavaScript在把setTimeout放到消息队列的过程中，循环的i是不会及时保存进去的，相当于你写了一个异步的方法，但是ajax的结果还没返回，只能等到返回之后才能传参到异步函数中。

在这里也是一样，for循环结束之后，因为i是用var定义的，所以var是全局变量（这里没有函数，如果有就是函数内部的变量），这个时候的i是5，从外部的console输出结果就可以知道。那么当执行setTimeout的时候，由于全局变量的i已经是5了，所以传入setTimeout中的每个参数都是5。很多人都会以为setTimeout里面的i是for循环过程中的i，这种理解是不对的。


我们给第一个例子加一行代码。

for (var i = 0; i < 5; ++i) {
    setTimeout(function() {
        console.log('2: ',i);
    }, 1000);
    console.log('1: ', i); //新加一行代码
}
 
console.log(i);
 
//输出
1:  0
1:  1
1:  2
1:  3
1:  4
5
2:  5
2:  5
2:  5
2:  5
2:  5

同步 => 异步 => 回调

这个例子可以很清楚的看到先执行for循环，for循环里面的console是同步的，所以先输出，for循环结束后，执行外部的console输出5，最后再执行setTimeout回调 55555。。。

这么简单，不够带劲是不是，那么面试官会问，怎么解决这个问题？

最简单的当然是let语法啦。。

注：使用 let 语句声明一个变量，该变量的范围限于声明它的块中。  可以在声明变量时为变量赋值，也可以稍后在脚本中给变量赋值。  

使用 let 声明的变量，在声明前无法使用，否则将会导致错误。

如果未在 let 语句中初始化您的变量，则将自动为其分配 JavaScript 值 undefined。

for (let i = 0; i < 5; ++i) {
    setTimeout(function() {
        console.log('2: ',i);
    }, 1000);
}
 
console.log(i);
 
//输出
i is not defined
2:  0
2:  1
2:  2
2:  3
2:  4

咦，有同学问，为什么外部的i报错了呢？
又有同学问，你这个口诀在这里好像不适应啊？

let是ES6语法，ES5中的变量作用域是函数，而let语法的作用域是当前块，在这里就是for循环体。在这里，let本质上就是形成了一个闭包。也就是下面这种写法一样的意思。如果面试官对你说用下面的这种方式，还有let的方式，你可以严肃的告诉他：这就是一个意思！这也就是为什么有人说let是语法糖。

var loop = function (_i) {
    setTimeout(function() {
        console.log('2：', _i);
    }, 1000);
};
 
for (var _i = 0; _i < 5; _i++) {
    loop(_i);
}
 
console.log(i);

面试官总说闭包、闭包、闭包，什么是闭包？后面再讲。

写成ES5的形式，你是不是发现就适合我说的口诀了？而用let的时候，你发现看不懂？那是因为你没有真正了解ES6的语法原理。

我们来分析一下，用了let作为变量i的定义之后，for循环每执行一次，都会先给setTimeout传参，准确的说是给loop传参，loop形成了一个闭包，这样就执行了5个loop，每个loop传的参数分别是0，1，2，3，4，然后loop里面的setTimeout会进入消息队列排队等候。当外部的console执行完毕，因为for循环里的i变成了一个新的变量 _i ，所以在外部的console.log(i)是不存在的。

现在可以解释闭包的概念了：当内部函数以某一种方式被任何一个外部函数作用域访问时，一个闭包就产生了。

我知道你又要我解释这句话了，loop(_i)是外部函数，setTimeout是内部函数，当setTimeout被loop的变量访问的时候，就形成了一个闭包。