js事件循环机制=>微任务与宏任务

最新推荐文章于 2025-06-17 08:13:33 发布

MrSuperPorter

最新推荐文章于 2025-06-17 08:13:33 发布

阅读量573

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_28473733/article/details/90451377

js 专栏收录该内容

84 篇文章

订阅专栏

博客围绕JS事件循环机制，重点介绍了微任务与宏任务。在JavaScript执行过程中，事件循环机制对任务的处理至关重要，微任务和宏任务有着不同的执行顺序和规则，了解它们有助于更好地掌握JS的运行逻辑。

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

// 宏任务 (第一次代码执行的环境 script标签 setTimeout ui渲染)  微任务:promise process.nextTick
// 单线程（主线程） 工作线程 webworker 辅助线程
//js执行机制 =》事件循环机制
//js异步分为两部分，一是宏任务(setTimeout,script, ui渲染)，二是微任务（promise,process.nextTick）
//默认再浏览器中，js会先执行当前栈中的代码：同步代码，同步代码执行完毕后会清空第一个微任务，执行的过程中会注册一些微任务，在执行下一个宏任务之前清空一次微任务
//再去执行下一个宏任务

console.log("01")

setTimeout(()=>{
    Promise.resolve().then(()=>{
        console.log('settimeout - then1');
        setTimeout(()=>{
            console.log('last timeout')
        })
    })
    console.log(1);
})
setTimeout(() => {
    console.log(2);
});
setTimeout(() => {
    console.log(3);
});
Promise.resolve().then(()=>{
    console.log('then');
    setTimeout(function () {
        console.log("哈哈哈")
    })
})
Promise.resolve().then(()=>{
    console.log('then');
})
Promise.resolve().then(()=>{
    console.log('then');
});

console.log("02")

执行结果：