详解JavaScript中的事件循环机制！！！
一、简单讲解
这个大家应该或多或少都知道的
|
1 2 3 4 5 |
for(vari=0;i<10;i++){ setTimeout(()=>{ console.log(i);//输出10个10 }); } |
解析：先执行for循环，循环叠加i，然后再执行setTimeout 10遍，所以会输出10个10
变体：
|
1 2 3 4 5 |
for(leti=0;i<10;i++){ setTimeout(()=>{ console.log(i);//依次输出0-9 }); } |
我们知道var跟let本质区别就是作用域的问题，所以会联想到let导致的，但在这一点上，并不是作用域问题，因为从事件循环机制来解释是有问题的
以上的代码等价于
|
1 2 3 4 5 6 7 |
for(vari=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里面的才是微任务
执行顺序：先执行同步任务，遇到异步任务，将其放入到宏任务或者微任务队列中，然后优先执行微任务，接下来再去执行宏任务。
简单的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
setTimeout(function(){ console.log(1) },0); newPromise(function(resolve,reject){ console.log(2);//这里是同步任务 resolve(); }).then((res)=>{ console.log(3); }) console.log(4); //输出结果是2431 |
解析：从上往下执行，setTimeout是宏任务，放到宏任务队列中，
Promise里面的是同步任务，所以先执行，输出2，then里面的是微任务，放到微任务队列中，
最后一个是同步任务，执行，输出4，
然后执行微任务，输出3
最后执行宏任务，输出1
来点难度的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
console.log(1); setTimeout(function(){ console.log(2); },0); setTimeout(function(){ console.log(3); setTimeout(function(){ console.log(4); },0); },0); newPromise(function(resolve,reject){ console.log(5); resolve(); }).then((res)=>{ console.log(6); newPromise(function(resolve,reject){ console.log(7); resolve(); }).then((res)=>{ console.log(8); }); }); newPromise(function(resolve,reject){ console.log(9); resolve(); }) .then((res)=>{ console.log(10); }) .then((res)=>{ console.log(11); }); console.log(12); //输出15912 //6710811 //234 |
解析：原理跟上面一样，不过需要注意的是，8跟11的顺序：，在这里then的层级，将各个Promise里面第一层的then放在一起，第二层的then放在一起，依此类推，
然后依次执行第一层的，执行完第一层，接下来执行完第二层，依此类推。
第一层（6，7，10）
第二层（8，11）
所以先输出8， 再输出11的。
再来一个（也最可能出错或者无法理解的）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
console.log(1); asyncfunctionfn(){ console.log(2); awaitconsole.log(3); console.log(4);//这一步，你应该会有问题 } setTimeout(()=>{ console.log(5); },0); fn(); newPromise((resolve)=>{ console.log(6); resolve(); }).then(()=>{ console.log(7); }); console.log(8); //输出：12368475 |
解析：async await是Promise的语法糖，只是针对写法上的优化
将async await翻译成Promise：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
asyncfunctionfn(){ console.log(2); awaitconsole.log(3); console.log(4);//这一步，你应该会有问题 } //等价于 functionfn(){ returnnewPromise((resolve,reject)=>{ console.log(2); resolve( (()=>{ console.log(3); })()//立即执行函数 ); }).then(()=>{ console.log(4); }); } |
这样，你应该能够明白，为啥输出3之后不是立即输出4了吧！
再来一道加深巩固的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
console.log(1); asyncfunctionfn(){ console.log(2); awaitconsole.log(3); awaitconsole.log(4); console.log(5); } setTimeout(()=>{ console.log(6); },2000); setTimeout(()=>{ console.log(7); },1000); fn(); newPromise((resolve)=>{ console.log(8); newPromise((resolve)=>{ console.log(9); resolve(); }).then(()=>{ console.log(10); }); resolve(); }).then(()=>{ console.log(11); newPromise((resolve)=>{ console.log(12); resolve(); }).then(()=>{ console.log(13); }); }); console.log(14); //输出1238914 //4101112513 //76 |
我相信，你现在应该理解掌握了！
只要钻的深，铁杵都能给你磨成针！！！