js中的宏任务和微任务

布满荆棘的人生 2023-01-06 01:12 216阅读 0赞

宏任务和微任务的关系  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]  
从代码入手最好理解，如下：

setTimeout(() => { 
        //执行后 回调一个宏事件
        console.log('内层宏事件3')
    }, 0)
    console.log('外层宏事件1');
    
    new Promise((resolve) => { 
        console.log('外层宏事件2');
        resolve()
    }).then(() => { 
        console.log('微事件1');
    }).then(()=>{ 
        console.log('微事件2')
    })

执行过程：

*  浏览器进入第一个宏任务，也就是主线程；
 *  遇到setTimeOut分发到宏任务中；
 *  遇到console直接执行，输出“外层宏事件1”；
 *  遇到new Promise直接执行，输出“外层宏事件2”；
 *  执行then被分发到微任务中；
 *  第一轮宏任务执行完毕，开始执行微任务，打印“微事件1”“微事件2”；
 *  第一轮微任务执行完毕，执行第二轮宏事件，打印setTimeOut里面的内容“宏事件3”；

执行结果：

*  外层宏事件1
 *  外层宏事件2
 *  微事件1
 *  微事件2
 *  内层宏事件3

[转自博客][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]: /images/20221119/72f978d1b7144f01bc91891e3eea176f.png
[Link 1]: https://www.cnblogs.com/wangziye/p/9566454.html

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 Node.js---宏任务和微任务

宏任务和微任务都是异步耗时任务。宏任务有setImmediate，setTimeout，setInterval， I/O，异步ajax，文件操作等宏任务中的优

Love The Way You Lie/ 2024年04月01日 06:30/ 0 赞/ 47 阅读

相关 js中的宏任务与微任务

事件循环 JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，

小鱼儿/ 2023年10月07日 20:57/ 0 赞/ 11 阅读

相关 js中的宏任务和微任务

宏任务和微任务的关系 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

布满荆棘的人生/ 2023年01月06日 01:12/ 0 赞/ 217 阅读

相关 JS Event Loops 微任务宏任务

EventLoop、宏任务、微任务 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

超、凢脫俗/ 2022年12月21日 03:25/ 0 赞/ 175 阅读

相关【JS】宏任务、微任务和 Promise 的性能

[https://juejin.im/post/6854573216212451336][https_juejin.im_post_6854573216212451336]

素颜马尾好姑娘i/ 2022年12月19日 01:20/ 0 赞/ 219 阅读

相关宏任务和微任务讲解

一、概念 1.宏任务MacroTask：消息队列（回调队列）中的任务称为宏任务，是由宿主环境（浏览器或者node）提供的，不断的从消息队列中取出并被事件循环执行，

你的名字/ 2022年11月18日 01:55/ 0 赞/ 238 阅读

相关 js事件循环：微任务和宏任务

事件循环：微任务和宏任务浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于事件循环的。理解事件循环的工作方式对于代码优化很重要，有时

墨蓝/ 2022年10月18日 04:54/ 0 赞/ 210 阅读

相关宏任务和微任务的详解

微任务可以在实时性和效率之间做一个有效的权衡。从目前的情况来看，微任务已经被广泛地应用，基于微任务的技术有 MutationObserver、Promise 以及以 Pro

怼烎@/ 2022年10月06日 00:51/ 0 赞/ 655 阅读

相关 js 宏任务和微任务

1.概念：宏任务（macrotask ）和微任务（microtask ）表示异步任务的两种分类。常见宏任务：I/O 、setTimeout、setInterval；微任务：P

谁借莪１个温暖的怀抱￠/ 2021年11月17日 08:38/ 0 赞/ 374 阅读

相关微任务和宏任务的区别

概念 1. 宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。 2.微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行

红太狼/ 2021年11月05日 16:16/ 0 赞/ 352 阅读