“setTimeout、Promise、Async/Await 的区别”题目解析和扩展

解答这个题目之前，先回顾下JavaScript的事件循环(Event Loop)。

JavaScript的事件循环

上面的话里我们需要注意到Event Queue这里是分两种情况的，即宏任务(macrotask)和微任务(microtask)，当主线程任务完成为空去Event Quenu读取函数的时候，是先读取的微任务，当微任务执行完毕之后，才会继续执行宏任务。流程可以参考下图。

所以这个时候可以总结到事件循环中的执行顺序

• 同步 > 异步
• 微任务 > 宏任务

那么微任务和宏任务都有什么呢，简单总结下就是：

• 微任务：Promise，process.nextTick。
• 宏任务：整体代码script，setTimeout，setInterval

setTimeout、Promise、Async/Await详解

setTimeout

console.log('script start')
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')

//执行结果：   script start ->  script end -> settimeout

解析一下上面的代码：

• 同步执行，遇到setTimeout，将其放入异步队列中，跳过继续执行，输出script start -> script end
• 当同步任务队列执行完毕，拿到异步队列中的setTimeout，输出settimeout

Promise

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')

//输出结果：script start->promise1->promise1 end->script end->promise2->settimeout

解析一下上面的代码

• 同步执行script start
• 因为Promise本身是同步的立即执行函数，所以输出promise1，resolve()的作用是改变Promise对象的状态，并不会阻断函数的执行，所以会执行输出promise1 end。then方法因为是异步回调微任务，所以会放入到微任务队列中。跳出执行
• 遇到setTimeout，放入宏任务队列，跳过执行。
• 输出script end，同步任务队列执行完毕，然后去微任务队列查看有无执行函数，获得promise1函数的then方法，输出promise2，此时微任务队列为空，然后去宏任务队列查看有无执行方法，输出settimeout。

async/await

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

//输出结果：script start->async1 start->async2->script end->async1 end

解析一下上面的代码：

• 同步执行，输出script start
• 执行async1()函数，输出async1 start，这是遇到await语句，执行await方法，但是后面的语句放入微任务队列。
• 执行async2()函数，输出async2
• 继续执行同步队列，输出script end。此时同步队列执行完毕，微任务队列查看有无执行函数或方法，输出async1 end
• 此时微任务队列为空，然后去宏任务队列查看有无执行方法。

总结

最后，给大家提供个究极问题，自己思考下答案然后打印对比下吧

    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');