详解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

我相信
 

 

 

 

 

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

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