结合microtask和macrotask理解event-loop

时间 2019-11-08

标签结合 microtask macrotask 理解 event loop 繁體版

原文原文链接

这篇文章真的是好文。讲的很清晰，看完以后更深一步的理解了事件循环机制。promise

http://www.jianshu.com/p/12b9...浏览器

简短的概述下总结

setTimeout是一个宏任务源，写在里面的回调函数会加到宏任务队列中。函数

Promise是一个微任务源，写在里面resolve以及reject回调会被加到微任务队列中。code

事件循环能够分为这样的一个过程：分别是 宏任务->执行栈->微任务。队列

setTimeout(function() {
    console.log('timeout1');
})

new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})

console.log('global1');

好比上面这样的一段代码，setTimeout是一个宏任务源，因此里面的回调函数console.log('timeout1');会被加到宏任务队列中。到了Promise，输出promise1以及promise2，等到for循环结束后，执行resolve，因为Promise是一个微任务源，因此console.log('then1');回调会被加到微任务队列中。继续执行代码，输出grobal1。这个时候，执行栈上的代码已经执行完毕，因此此时咱们执行微任务队列，此时的微任务队列上有console.log('then1');，因此浏览器输出then1。至此，一轮的事件循环已经执行完毕，开启新的一轮事件循环。也是从宏任务->执行栈->微任务。因为此时宏任务上有事件console.log('timeout1');，因此输出timeout1。这就是整段代码执行状况的理解。依次输出以下：事件

promise1
promise2
global1
then1
timeout1