事件循环案例讲解

最新推荐文章于 2023-03-06 20:49:23 发布

裴小浩

最新推荐文章于 2023-03-06 20:49:23 发布

阅读量329

点赞数

分类专栏：事件循环文章标签： event node.js

本文链接：https://blog.youkuaiyun.com/qq_34918511/article/details/118884947

版权

本文详细介绍了事件循环的工作机制，包括主任务、微任务和宏任务的执行顺序，并通过10个案例分析了不同情况下事件循环的执行流程。案例涵盖了Promise、async/await、setTimeout、事件绑定等多种场景，深入解析了微任务内部嵌套宏任务以及宏任务内部的微任务执行顺序。此外，还提到了Node.js v11之后微任务的插队执行特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件循环机制：

执行顺序：主任务 => 微任务 => 宏任务
宏任务：定时器（setTimeout setInterval、requestAnimationFrame）、事件绑定、ajax回调函数、node的fs模块
微任务: promise.then、 async await 、process.nextTick、queueMicrotask

案例1

console.log('start');
setTimeout(() => {
   
    console.log(333);
}); // 安排明天干的活
Promise.resolve('x').then(() => {
   
    console.log(3);
}).then(() => {
   
    console.log(4);
}).then(() => {
   
    console.log(5); // 小任务无限的加 今天干完否则下不了班
    //nodejs 有小任务限制，跳过直接到宏任务
})
console.log('end');

输出结果：

start => end => 3 => 4 => 5 =>333

解释：

一个微任务情况，依次执行完微任务

案例2

console.log('start');
setTimeout(() => {
   
    console.log(333);
}); // 安排明天干的活
queueMicrotask(() => {
   
    console.log(1);
    queueMicrotask(() => {
   
        console.log(2);
    });
})
Promise.resolve('x').then(() => {
   
    console.log(3);
}).then(() => {
   
    console.log(4);
}).then(() => {
   
    console.log(5); // 小任务无限的加 今天干完否则下不了班
    //nodejs 有小任务限制，跳过直接到宏任务
})
console.log('end');