标签:macrotask console log 队列 microtask 任务 then1 event timeout1
这篇文章真的是好文。讲的很清晰,看完之后更深一步的理解了事件循环机制。
简短的概述下总结
setTimeout
是一个宏任务源,写在里面的回调函数会加到宏任务队列中。
Promise
是一个微任务源,写在里面resolve
以及reject
回调会被加到微任务队列中。
事件循环可以分为这样的一个过程:分别是 宏任务
->执行栈
->微任务
。
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
本文转载于:结合microtask和macrotask理解event-loop
标签:macrotask,console,log,队列,microtask,任务,then1,event,timeout1 来源: https://www.cnblogs.com/baimeishaoxia/p/12901229.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。