EventLoop循环机制详解(微任务、宏任务与async-await)-蒲公英云

EventLoop循环机制详解(微任务、宏任务与async-await)

https://www.jianshu.com/p/5b4c4756e461 图片引用

$\#\#\# 单页应用 SPA$
首先明晰两个概念：

宏任务和微任务

也称之为 task 和microtask ，微任务要先于宏任务执行

宏任务主要有：

script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。

微任务主要有：

Promise.then、 MutationObserver、 process.nextTick(Node.js 环境)。

宏任务和微任务的区分：首先前端代码执行都是依赖于浏览器和 node 环境的，我们暂且称之为宿主。即在宿主可控的范围内的都属于宏任务，宿主线程的回调就是宏队列。

以下运行示例：

console.log(1);                        //非异步 直接输出1 
setTimeout(function() {                 //异步 进入宏任务队列 
    console.log(2);
}, 0);
new Promise(function(resolve) { 
    console.log(3);                    //非异步 直接输出3
    resolve(Date.now());
}).then(function() { 
    console.log(4);                    //异步 进入微任务队列 
});
console.log(5);                        //非异步 直接输出5
setTimeout(function() {                //异步 进入宏任务队列
    new Promise(function(resolve) { 
        console.log(6);               //局部非异步
        resolve(Date.now());
    }).then(function() { 
        console.log(7);
    });
}, 0);
第一遍 输出 1 3 5 后此时宏任务队列中存在   2    6/7   微任务队列存在4  
按照微任务先于宏任务的原则  所以第四个输出4  第五个输出2 而第二个宏任务中存在局部非异步和一个微任务7 
运行顺序：因此，最终的输出顺序为：1, 3, 5, 4, 2, 6, 7;
作者：腾讯IVWEB团队
链接：https://juejin.cn/post/6844904035770695693
来源：掘金

async-await

async-await 只是 Promise+generator 的一种语法糖而已。

function A() { 
    return Promise.resolve(Date.now());
}
async function B() { 
    console.log(Math.random());
    let now = await A();
    console.log(now);
}
——————————————————————————————————————————————重写为promise格式
function B() { 
    console.log(Math.random());
    A().then(function(now) { 
        console.log(now);
    })
}
console.log(1);
B();
console.log(2);
按照之前 promise.then 归为微任务的规则 。由于非异步先执行的原则， 先输出1 ，随后进入函数B 区分随机数为非异步，  now为微任务，
输出随机数，后输出2 ，最后输出微任务now。
运行顺序：因此，最终的输出顺序为：1, 随机数,2,时间戳;