详解JavaScript中的事件循环机制！！！

一 
  
  
  
  
  
  
  
 、简单讲解

这个大家应该或多或少都知道的

for (var i = 0; i < 10; i++) { setTimeout(() => { console.log(i); // 输出10个10 }); }

解析：先执行for循环                ，循环叠加i
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，然后再执行setTimeout 10遍















，所以会输出10个10

变体： for (let i = 0; i < 10; i++) { setTimeout(() => { console.log(i); // 依次输出0-9 }); }

我们知道var跟let本质区别就是作用域的问题  
  
  
  
  
  
  
  
，所以会联想到let导致的 
  
  
  
  
  
  
  
 ，但在这一点上


 


 


 


 


 


 


 


 ，并不是作用域问题 
 
 
 
 
 
 
 
，因为从事件循环机制来解释是有问题的

以上的代码等价于 for (var i = 0; i < 10; i++) { (function (i) { setTimeout(() => { console.log(i); }); })(i); // 立即执行函数  
   
   
   
   
   
   
   
 ，以上的let应该是将代码特殊处理了下 }

立即执行函数：函数声明后立即执行                。

从事件循环的角度来说

 

 

 

 

 

 

 

 ，应该先执行for循环将i叠加到10
 

 

 

 

 

 

 

 
，执行完后再去执行for循环体（setTimeout）,此时的i变成了10                ，所以每次输出都是10
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，

这里使用let















，应该是特殊处理了一下的
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  。

二 
  
  
  
  
  
  
  
 、深入讲解

我们知道JavaScript语言是单线程的                        ，至于为啥是单线程？

假设有两个线程
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，一个在页面上新增一个div























，另一个线程在页面上删除div                ，那最终听谁的？

那JavaScript怎么实现异步的呢？

在JavaScript中
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，有两类任务：同步任务和异步任务















。

同步任务：普通的任务















，依次从上往下执行  
  
  
  
  
  
  
  
。

异步任务：又分为宏任务

 


 


 


 


 


 


 


 
、微任务 
  
  
  
  
  
  
  
 。

宏任务：setTimeout跟setInterval

微任务：Promise().then() 这里要注意一下  
  
  
  
  
  
  
  
，Promise方法里面的是同步任务 
  
  
  
  
  
  
  
 ，then里面的才是微任务

执行顺序：先执行同步任务


 


 


 


 


 


 


 


 ，遇到异步任务 
 
 
 
 
 
 
 
，将其放入到宏任务或者微任务队列中  
   
   
   
   
   
   
   
 ，然后优先执行微任务

 

 

 

 

 

 

 

 ，接下来再去执行宏任务


 


 


 


 


 


 


 


 。

简单的例子：

setTimeout(function() { console.log(1) }, 0); new Promise(function(resolve, reject) { console.log(2); // 这里是同步任务 resolve(); }).then((res) => { console.log(3); }) console.log(4); // 输出结果是 2 4 3 1

解析：从上往下执行
 

 

 

 

 

 

 

 
，setTimeout是宏任务                ，放到宏任务队列中
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，

Promise里面的是同步任务















，所以先执行                        ，输出2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，then里面的是微任务























，放到微任务队列中                ，

最后一个是同步任务
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，执行















，输出4  
  
  
  
  
  
  
  
，

然后执行微任务 
  
  
  
  
  
  
  
 ，输出3

最后执行宏任务


 


 


 


 


 


 


 


 ，输出1

来点难度的：

console.log(1); setTimeout(function () { console.log(2); }, 0); setTimeout(function () { console.log(3); setTimeout(function () { console.log(4); }, 0); }, 0); new Promise(function (resolve, reject) { console.log(5); resolve(); }).then((res) => { console.log(6); new Promise(function (resolve, reject) { console.log(7); resolve(); }).then((res) => { console.log(8); }); }); new Promise(function (resolve, reject) { console.log(9); resolve(); }) .then((res) => { console.log(10); }) .then((res) => { console.log(11); }); console.log(12); // 输出 1 5 9 12 // 6 7 10 8 11 // 2 3 4

解析：原理跟上面一样 
 
 
 
 
 
 
 
，不过需要注意的是  
   
   
   
   
   
   
   
 ，8跟11的顺序：

 

 

 

 

 

 

 

 ，在这里then的层级
 

 

 

 

 

 

 

 
，将各个Promise里面第一层的then放在一起                ，第二层的then放在一起
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，依此类推















，

然后依次执行第一层的                        ，执行完第一层
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，接下来执行完第二层























，依此类推 
 
 
 
 
 
 
 
。

第一层（6                ，7
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，10）

第二层（8















，11）

所以先输出8  
  
  
  
  
  
  
  
， 再输出11的  
   
   
   
   
   
   
   
 。

再来一个（也最可能出错或者无法理解的）：

console.log(1); async function fn() { console.log(2); await console.log(3); console.log(4); // 这一步 
  
  
  
  
  
  
  
 ，你应该会有问题 } setTimeout(() => { console.log(5); }, 0); fn(); new Promise((resolve) => { console.log(6); resolve(); }).then(() => { console.log(7); }); console.log(8); // 输出：1 2 3 6 8 4 7 5

解析：async await是Promise的语法糖


 


 


 


 


 


 


 


 ，只是针对写法上的优化

将async await翻译成Promise： async function fn() { console.log(2); await console.log(3); console.log(4); // 这一步 
 
 
 
 
 
 
 
，你应该会有问题 } // 等价于 function fn() { return new Promise((resolve, reject) => { console.log(2); resolve( (() => { console.log(3); })() // 立即执行函数 ); }).then(() => { console.log(4); }); }

这样  
   
   
   
   
   
   
   
 ，你应该能够明白

 

 

 

 

 

 

 

 ，为啥输出3之后不是立即输出4了吧！

再来一道加深巩固的：

console.log(1); async function fn() { console.log(2); await console.log(3); await console.log(4); console.log(5); } setTimeout(() => { console.log(6); }, 2000); setTimeout(() => { console.log(7); }, 1000); fn(); new Promise((resolve) => { console.log(8); new Promise((resolve) => { console.log(9); resolve(); }).then(() => { console.log(10); }); resolve(); }).then(() => { console.log(11); new Promise((resolve) => { console.log(12); resolve(); }).then(() => { console.log(13); }); }); console.log(14); // 输出 1 2 3 8 9 14 // 4 10 11 12 5 13 // 7 6

我相信
 

 

 

 

 

 

 

 
，你现在应该理解掌握了！

只要钻的深                ，铁杵都能给你磨成针！！！