事件循环和任务队列

如有错误欢迎指正，谢~

我们都知道js是单线程语言，也就是只有一个线程，常称为主线程，在该线程中包含任务队列和执行栈

任务队列：

一些异步操作会将相关回调添加到任务队列中，而且不同的异步操作添加到队列的时间也不一样。

eg：

①onclick 等异步是当事件触发立即会将回调放到任务队列中。

②settimeout 会等到延迟时间到了再把回调放到任务队列中。

③像网络请求ajax是等到请求完成的时候再把回调放到任务队列中去。

执行栈：

执行栈就相当于一个全局方法，主方法，里面有个同步任务和异步任务，主线程在执行碰到同步任务就执行，碰到异步任务就将其回调放到任务队列中，执行完同步任务之后，就开始执行任务队列了

具体怎么划分看下面：

macrotasks（就是我们平常说的任务队列）和microtasks的划分：

macrotasks包括：script (整体代码)，setTimeout，setInterval，setImmediate，

microtasks包括：process.nextTick，Promises，Object.observe，MutationObserver

宏观任务和微观任务可以这么理解：

宏观任务1 队列          -------------------对应一个微观任务---------------   微观任务1队列

宏观任务2 队列         -------------------对应一个微观任务---------------    微观任务2队列

        ...                                                                                                            ...

宏观任务n 队列         -------------------对应一个微观任务---------------    微观任务n队列

执行全部宏观任务队列1之后再去取微观全部1任务执行，任何执行完 ，第二轮宏观任务2队列执行全部执行完毕执行全部微观任务2，然后第3轮。。。。。循环下去

那么我们来看一个例子：

eg1:

setTimeout(function(){
    console.log(1)
},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=100000 ; i>0 ; i-- ){
        i==1 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);

结果是

2,3,5,4,1

eg2:

setTimeout(function(){
    console.log(1)
},0);
setTimeout(function(){
    console.log(6)
},2000);
new Promise(function(resolve){
    console.log(2)
    for( var i=100000 ; i>0 ; i-- ){
        i==1 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4);
    setTimeout(function(){
        console.log(8)
    },1000)
});
console.log(5);

这个执行结果是啥呢？？？想想

结果是：

2,3,5,4,1,8,6

 eg3:

setImmediate(function(){
  console.log(1);
},0);
setTimeout(function(){
  console.log(2);
},0);
new Promise(function(resolve){
  console.log(3);
  resolve();
  console.log(4);
}).then(function(){
  console.log(5);
});
console.log(6);
process.nextTick(function(){
  console.log(7);
});
console.log(8);

node 环境下：

3,4,6,8,5,1,2,7

浏览器环境下：

settimeout  优先级大于 setImmediate

nextTick 优先级 大于 promise

3,4,6,8,7,5,2,1

 eg4:

//加入两个nextTick的回调函数
process.nextTick(function () {
  console.log('nextTick延迟执行1');
});
process.nextTick(function () { 
  console.log('nextTick延迟执行2');
});
// 加入两个setImmediate()的回调函数
setImmediate(function () {
  console.log('setImmediate延迟执行1'); 
  // 进入下次循环 
  process.nextTick(function () {
    console.log('强势插入');
  });
});
setImmediate(function () {
  console.log('setImmediate延迟执行2'); 
});
 
console.log('正常执行');

浏览器环境下：正常执行，nextTick延迟执行1，nextTick延迟执行2，setImmediate延迟执行1，强势插入，setImmediate延迟执行2

async function async1(){
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2(){
    console.log("async2");
}
console.log("script start");
setTimeout(function(){
    console.log("settimeout");
},0);
async1();
new Promise(function(resolve){
     console.log("promise1");
     resolve()
}).then(function(){
    console.log("promise2");
})
console.log("script end");

//结果

script start
async1 start
async2
promise1
script end
promise2
async1 end
settimeout

宏任务1队列：script start ，  async1 start ， async2  ，promise1 ， script end ----微任务队列1：promise2   (undefined) => { }(await Promise.resolve(undefined)的then(undefined){ (undefined) => { 这里才能拿到resolve的结果为undefined, 这是一个回调，异步操作，所以放到微任务中}})

宏任务2队列：settimeout     -----微任务队列2  空空如也

总结一下，便于自己学习，也分享大家一起学习。(#^.^#)