事件循环 Event Loop事件循环

#事件循环

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

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

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

#练习，快来试试

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

#结果及简单分析

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

#详细分析

#先执行script(宏任务）

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

#再执行微任务

复制new Promise((resolve, reject) => {
  console.log('5');
  reject();
}).then(() => {
  console.log('6');
}).catch(() => {
  console.log('7'); 
  setTimeout(() => { 
    console.log('8');
  }, 0);
});

#再查看执行宏任务1

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

#执行微任务

复制setTimeout(() => { 
    console.log('2'); 
    new Promise((resolve) => {
      console.log('3'); 
      resolve();
    }).then(() => { 
      console.log('4'); 
    });
}, 0);

#再执行宏任务2

复制new Promise((resolve, reject) => {
  console.log('5');
  reject();
}).then(() => {
  console.log('6');
}).catch(() => {
  console.log('7'); 
  setTimeout(() => { 
    console.log('8'); 
  }, 0);
});

#再来练练吧

复制console.log('1');
setTimeout(function(){
    console.log('2')
    process.nextTick(
        function (){
            console.log('3');
        }
    )
    new Promise(function (resolve){
        console.log('4');
        resolve();
    }).then(function (){
        console.log('5')
    })
})
process.nextTick(function(){
    console.log('6');
})
new Promise(function (resolve){
    console.log('7');
    resolve();
}).then(function(){
    console.log('8')
})
setTimeout(function(){
    console.log('9');
    process.nextTick(function(){
        console.log('10');
    })
    new Promise(function(resolve){
        console.log('11');
        resolve();
    }).then(function(){
        console.log('12')
    })
})

#结果➕分析

复制console.log('1'); 
setTimeout(function(){ 
    console.log('2') 
    process.nextTick( 
        function (){
            console.log('3'); 
        }
    )
    new Promise(function (resolve){
        console.log('4'); 
        resolve();
    }).then(function (){ 
        console.log('5') 
    })
})
process.nextTick(function(){ 
    console.log('6'); 
})
new Promise(function (resolve){
    console.log('7'); 
    resolve();
}).then(function(){  
    console.log('8') 
})
setTimeout(function(){ 
    console.log('9'); 
    process.nextTick(function(){ 
        console.log('10'); 
    })
    new Promise(function(resolve){
        console.log('11'); 
        resolve();
    }).then(function(){ 
        console.log('12') 
    })
})

#错误思路

复制console.log('1'); 
setTimeout(function(){ 
    console.log('2') 
    process.nextTick( 
        function (){
            console.log('3'); 
        }
    )
    new Promise(function (resolve){
        console.log('4'); 
        resolve();
    }).then(function (){ 
        console.log('5') 
    })
})
process.nextTick(function(){ 
    console.log('6'); 
})
new Promise(function (resolve){
    console.log('7'); 
    resolve();
}).then(function(){  
    console.log('8') 
})
setTimeout(function(){ 
    console.log('9'); 
    process.nextTick(function(){ 
        console.log('10'); 
    })
    new Promise(function(resolve){
        console.log('11'); 
        resolve();
    }).then(function(){ 
        console.log('12') 
    })
})

1 7 6 8 2 4 9 11 3 5 10
*/

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

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