js 宏任务,微任务

本文详细解析了JavaScript中的宏任务与微任务概念,包括它们的执行顺序及分类。通过具体示例代码展示了宏任务如script和setTimeout,以及微任务如Promise的resolve如何在实际运行中交互。

   在了解async之后,发现一个自己不是很熟悉的点儿,在这儿记录一下

    js 中存在宏任务和微任务,js 的执行顺序是 一个宏任务执行结束之后才会去执行下一个宏任务,微任务是在本宏任务的主要的任务结束之后,再去执行微任务,当所有的微任务结束之后,这个宏任务也就算执行结束了,值的注意的是,script 就是一个大的宏任务
   先分类:
       宏任务  srcipt > setImmediate  > messageChannel > setTimeout/setInterval
       微任务  promise相关的  reslove 里边的    

   举例说明
      <script>

            console.log("1")
            setTimeout(function() {console.log('2')}, 0)
            new Promise(function (resolve) {
                console.log('3')
                resolve() 
            }).then( function() {
                console.log('4')

            })

            console.log('5')

      </script>

       结果会是   1  3  5  4   2 

      因为script 和 setTimeout 都是宏任务,所以setTimeout 会在script 结束之后执行,所以 2 的最后的
      then 是微任务,要等宏任务的主线任务结束之后执行,所以会 是先3 ,然后跳出 执行 5, 5完成之后,宏任务的主线完成
      开始执行微任务  then , 打印  4 ,之后,宏任务结束,开始执行另一个宏任务,也就是 setTimeout , 打印 2

转载于:https://www.cnblogs.com/mumu-web/p/10148569.html

### JavaScript 中任务任务的区别及执行顺序 #### 一、定义区别 任务任务是 JavaScript 异步编程的核心概念。 - **任务**是指那些被放入任务队列的任务,通常涉及 I/O 操作、定时器回调、DOM 渲染等操作[^2]。常见的任务包括 `setTimeout`、`setInterval`、`AJAX` 请求完成后的回调以及 DOM 事件触发的回调。 - **任务**则是指那些优先级更高的异步任务,它们会在当前任务完成后立即执行。典型的任务包括由 `Promise.then/catch/finally` 创建的回调、`MutationObserver` 的回调以及 `async/await` 的后续代码[^3]。 #### 二、执行顺序 JavaScript 的事件循环机制决定了任务任务的执行顺序: 1. 当脚本开始运行时,所有的同步任务会立即被执行。例如,普通的函数调用或变量声明属于此类[^3]。 2. 同步任务执行完毕后,事件循环会检查并清空任务队列中的所有任务。这意味着如果某个任务中产生了新的任务,则这些任务将在该任务结束后立刻执行[^1]。 3. 只有当任务队列完全清空之后,事件循环才会从任务队列中取出下一个任务继续执行。 以下是基于此规则的一个具体例子: ```javascript console.log("Script start"); setTimeout(() => { console.log("Macro task"); }, 0); Promise.resolve() .then(() => { console.log("Microtask 1"); }) .then(() => { console.log("Microtask 2"); }); console.log("Script end"); ``` 在这个案例中,输出的结果将是: 1. `"Script start"` —— 此为初始同步任务的一部分; 2. `"Script end"` —— 继续执行剩余的同步任务; 3. `"Microtask 1"` 和 `"Microtask 2"` —— 任务队列的内容依次执行; 4. 最终才是 `"Macro task"` —— 来自任务队列中的第一个任务。 #### 三、实际应用中的注意事项 在开发过程中合理利用任务任务可以帮助优化用户体验。例如,在某些场景下可能希望逻辑先行计算而不阻塞界面更新,这时可以选择使用任务;而在另一些情况下为了确保 DOM 已经渲染完成后再做进一步交互则需依赖任务来实现。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值