[JavaScript知识库]事件循环模型（包含async、Promise、process.nextTick）

循环的理解：

1. 这里介绍的是浏览器的执行机制，在node或ringo等执行机制会不同。运行机制大多指js解析引擎，是统一的。

2. 主程序执行完后，就一直在等待任务队列的任务，settimeout等异步任务会直接拿出来执行，onclick等触发任务会一直在队列中，等你触发相应的事件后才会执行

   

3. setTimeout理解：遇到setTimeout声明，就将函数放到event table，过了指定的时间就将函数放入event queue。所以如果等待时间大于主程序运行时间它几乎是准确的，而如果它放入了event queue中后主程序还没运行完，那么要等待主程序运行完才能运行event queue里的内容。

4. setinterval理解：每隔一段时间将要执行的函数加入到event queue。

5. settimeout 和setintelout属于进入宏任务的event queue

6. new promise下的代码立即执行，多层new promise也是立即执行

7. promise.then和process.nextTick,await的下一句代码进入微任务的event queue。

   tip：async函数是基于Promise的封装，await的下一句代码相当于在.then里执行，所以加入微任务。

执行流程：

1. 每执行完一个宏任务会去执行微任务队列。执行所有微任务是只每执行完当前微任务去检查队列是否还有别的微任务

2. 微任务按添加的顺序依次执行，它是一个队列（先进先出）。

   ①如队列[fun3,fun2,fun1]，执行顺序是fun1()、fun2()、fun3()

   ②特别注意，每执行完一次微任务都会再去检查是否还有微任务，也就是说如果执行fun3()再次添加了微任务，会继续执行该任务 ，而不会进行宏任务

3. 最开始window上的代码执行完也算执行完了一段宏任务,执行完setTimeout里面的回调也算是执行完了一段宏任务。

字节面试题：

async function async1() { 
  console.log("async1 start"); //2
  await async2(); //调用async2()，下面代码进入微任务，微任务队列[async1 end]
  console.log("async1 end"); 
}

async function async2() { 
  console.log("async2"); //3
}

console.log("script start"); //1
async1(); //调用async1()

new Promise((resolve)=>{
	console.log('promise1');//4
	resolve();
}).then(()=>{
	console.log('promise2');//微任务队列：[promise2,async1 end]
})

console.log("script end"); //5，
//此时执行完所有宏任务，接着执行微任务。
//async1 end  //6
//promise2    //7

练习题：

console.log('script start')    //1

async function async1() {
    await async2()
    console.log('async1 end')  //5
}
async function async2() {
    console.log('async2 end')  //2
}
async1()

setTimeout(function() {
    console.log('setTimeout')  //8
}, 0)

new Promise(resolve => {
    console.log('Promise')   //3
    resolve()
}).then(function() {
    console.log('promise1')  //6
}).then(function() {
    console.log('promise2')  //7
})

console.log('script end')   //4

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，3，5，9，11，10，12

参考：https://juejin.cn/post/6844903512845860872