事件循环

同步任务（立即执行） 如console.log()、new Promise

宏任务主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)

微任务主要包含：Promise的then函数和catch函数、MutaionObserver、process.nextTick(Node.js 环境)

练习，快来试试

复制 1console.log('1');
 2setTimeout(() => {
 3    console.log('2');
 4    new Promise((resolve) => {
 5      console.log('3');
 6      resolve();
 7    }).then(() => {
 8      console.log('4');
 9    });
10}, 0);
11new Promise((resolve, reject) => {
12  console.log('5');
13  reject();
14}).then(() => {
15  console.log('6');
16}).catch(() => {
17  console.log('7');
18  setTimeout(() => {
19    console.log('8');
20  }, 0);
21});
22console.log('9');

结果及简单分析

复制 1console.log('1'); 
 2setTimeout(() => { 
 3    console.log('2'); 
 4    new Promise((resolve) => {
 5      console.log('3'); 
 6      resolve(); 
 7    }).then(() => {
 8      console.log('4'); 
 9    });
10}, 0);
11new Promise((resolve, reject) => {
12  console.log('5'); 
13  reject(); 
14}).then(() => {
15  console.log('6');
16}).catch(() => {
17  console.log('7'); 
18  setTimeout(() => { 
19    console.log('8'); 
20  }, 0);
21});
22console.log('9'); 

详细分析

先执行script(宏任务）

复制 1console.log('1'); 
 2setTimeout(() => { 
 3    console.log('2');
 4    new Promise((resolve) => {
 5      console.log('3');
 6      resolve();
 7    }).then(() => {
 8      console.log('4');
 9    });
10}, 0);
11new Promise((resolve, reject) => {
12  console.log('5'); 
13  reject(); 
14})
15console.log('9'); 

再执行微任务

复制 1new Promise((resolve, reject) => {
 2  console.log('5');
 3  reject();
 4}).then(() => {
 5  console.log('6');
 6}).catch(() => {
 7  console.log('7'); 
 8  setTimeout(() => { 
 9    console.log('8');
10  }, 0);
11});

再查看执行宏任务1

复制 1setTimeout(() => { 
 2    console.log('2'); 
 3    new Promise((resolve) => {
 4      console.log('3'); 
 5      resolve(); 即.then() ➡ 将其分发到本轮循环微任务队列中去
 6    }).then(() => {
 7      console.log('4');
 8    });
 9}, 0);
10

执行微任务

复制 1setTimeout(() => { 
 2    console.log('2'); 
 3    new Promise((resolve) => {
 4      console.log('3'); 
 5      resolve();
 6    }).then(() => { 
 7      console.log('4'); 
 8    });
 9}, 0);

再执行宏任务2

复制 1new Promise((resolve, reject) => {
 2  console.log('5');
 3  reject();
 4}).then(() => {
 5  console.log('6');
 6}).catch(() => {
 7  console.log('7'); 
 8  setTimeout(() => { 
 9    console.log('8'); 
10  }, 0);
11});

再来练练吧

复制 1console.log('1');
 2setTimeout(function(){
 3    console.log('2')
 4    process.nextTick(
 5        function (){
 6            console.log('3');
 7        }
 8    )
 9    new Promise(function (resolve){
10        console.log('4');
11        resolve();
12    }).then(function (){
13        console.log('5')
14    })
15})
16process.nextTick(function(){
17    console.log('6');
18})
19new Promise(function (resolve){
20    console.log('7');
21    resolve();
22}).then(function(){
23    console.log('8')
24})
25setTimeout(function(){
26    console.log('9');
27    process.nextTick(function(){
28        console.log('10');
29    })
30    new Promise(function(resolve){
31        console.log('11');
32        resolve();
33    }).then(function(){
34        console.log('12')
35    })
36})

结果➕分析

复制 1console.log('1'); 
 2setTimeout(function(){ 
 3    console.log('2') 
 4    process.nextTick( 
 5        function (){
 6            console.log('3'); 
 7        }
 8    )
 9    new Promise(function (resolve){
10        console.log('4'); 
11        resolve();
12    }).then(function (){ 
13        console.log('5') 
14    })
15})
16process.nextTick(function(){ 
17    console.log('6'); 
18})
19new Promise(function (resolve){
20    console.log('7'); 
21    resolve();
22}).then(function(){  
23    console.log('8') 
24})
25setTimeout(function(){ 
26    console.log('9'); 
27    process.nextTick(function(){ 
28        console.log('10'); 
29    })
30    new Promise(function(resolve){
31        console.log('11'); 
32        resolve();
33    }).then(function(){ 
34        console.log('12') 
35    })
36})

错误思路

复制 1console.log('1'); 
 2setTimeout(function(){ 
 3    console.log('2') 
 4    process.nextTick( 
 5        function (){
 6            console.log('3'); 
 7        }
 8    )
 9    new Promise(function (resolve){
10        console.log('4'); 
11        resolve();
12    }).then(function (){ 
13        console.log('5') 
14    })
15})
16process.nextTick(function(){ 
17    console.log('6'); 
18})
19new Promise(function (resolve){
20    console.log('7'); 
21    resolve();
22}).then(function(){  
23    console.log('8') 
24})
25setTimeout(function(){ 
26    console.log('9'); 
27    process.nextTick(function(){ 
28        console.log('10'); 
29    })
30    new Promise(function(resolve){
31        console.log('11'); 
32        resolve();
33    }).then(function(){ 
34        console.log('12') 
35    })
36})
37
381 7 6 8 2 4 9 11 3 5 10
39*/

执行完本次宏任务就会去执行本轮微任务，再去执行下一次宏任务。

而不是把宏任务队列全执行完再执行微任务。