原文:https://juejin.cn/post/6844903512845860872
我的简单理解:
两个队列:一个宏任务队列,一个微任务队列
一个事件循环
宏任务包括:包括整体代码script,setTimeout,setInterval, I/O
微任务包括:Promise的then\catch\finally方法
执行步骤:
最初是整个执行代码作为一个宏任务开始执行
遇到普通脚本直接执行
遇到Promise(function(resolve, reject){xxx}).then(function(result){yyy}, function(error){zzz}) 这种Promise代码,
则会直接执行第1个function代码xxx,
如果xxx代码中调用了resoleve或者reject回调,则会把对应的第2个或者第3个function加入到微任务队列
遇到setTimeout(function(){xxx}, n),setInterval(function(){yyy}, n) 这种定时代码,则会在n秒后或者每n秒把对应的function加入到宏任务队列
当前执行的那个宏任务结束后,从微任务队列取出一个微任务执行,循环直到当前微任务队列为空
然后从宏任务队列中取出一个宏任务执行,重复上面的步骤
直到所有任务执行完成
console.log('1'); setTimeout(function() { console.log('2'); promise.then(function(re) { for (let i = 0; i < 1000000000; i++) { } console.log('3-' + re) }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }, 2000) promise = new Promise(function(resolve) { console.log('7'); resolve('8'); console.log('pre 8'); }) console.log('pre 8 2'); promise.then(function(re) { console.log('1-' + re); promise.then(function(re) { console.log('1-1-' + re) }); }); console.log('hh'); promise.then(function(re) { console.log('2-' + re) promise.then(function(re) { console.log('2-1-' + re) }); }); setTimeout(function() { console.log('9'); new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) }, 2000)
其他文章: