前端 JS 经典:宏任务、微任务、事件循环(EventLoop)

1. 前言概览

js 是一门单线程的非阻塞的脚本语言

单线程:只有一个主线程处理所有任务

非阻塞:有异步任务,主线程挂起这个任务,等异步返回结果再根据一定规则执行

2. 宏任务与微任务

javascript 复制代码
都是异步任务

宏任务:script 标签,setTimeout,setInterval,setImmediate,I/O,接口调用
微任务:process.nextTick,Promise.then() catch(),Async/Await,Object.observe

注意:Promise 本身是同步任务,then,catch,finally 是异步任务
async 中 await 右边代码是同步任务,之后代码是异步任务

3. 事件循环

主线程执行顺序:一个宏任务(script 标签)-> 同步任务 -> 微任务 -> 一个宏任务 -> 宏任务中的微任务(如果有) -> 下一个宏任务 -> ..... 直到 js 事件执行完成。

4. 经典案例

javascript 复制代码
async function async1(){
  console.log('1') // 同2
  await async2()
  console.log('2') // 微1
}
async function async2(){
  console.log('3') // 同3
}
console.log('4') // 同1
setTimeout(function(){
  console.log('5') // 宏1
},0)
setTimeout(function(){
  console.log('6') // 宏2
},3)
async1();
new Promise(function(resolve){
  console.log('7') // 同4
  resolve();
  console.log('8') // 同5
}).then(function(){
  console.log('9') // 微2
})
console.log('10') // 同6
// 输出:4,1,3,7,8,10,2,9,5,6
相关推荐
Json_6 分钟前
Vue v-bind指令
前端·vue.js·深度学习
姑苏洛言9 分钟前
《全民国家安全教育知识竞赛》小程序开发全记录
前端·后端
Json_9 分钟前
JS中的冒泡简洁理解
前端·javascript·深度学习
欧雷殿9 分钟前
再谈愚蠢的「八股文」面试
前端·人工智能·面试
Json_10 分钟前
Vue 自定义指令
前端·vue.js·深度学习
Ariel_提拉米苏11 分钟前
表格数据导出为Excel
前端·javascript·vue.js·excel
愚润求学33 分钟前
【C++】vector常用方法总结
开发语言·c++·vector
weixin_4541024636 分钟前
cordova android12+升级一些配置注意事项
android·前端·cordova
天天进步201543 分钟前
Python项目-基于Flask的个人博客系统设计与实现(1)
开发语言·python·flask
安然无虞1 小时前
31天Python入门——第20天:魔法方法详解
开发语言·后端·爬虫·python