当前位置: 首页 > article >正文

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

1. 前言概览

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

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

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

 2. 宏任务与微任务

都是异步任务

宏任务: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. 经典案例

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


http://www.kler.cn/a/106739.html

相关文章:

  • 官方压测工具memtier-benchmark压测redis
  • LinuxCentos中安装apache网站服务详细教程
  • 越南很火的slots游戏投放Google谷歌广告策略
  • 如何进行产线高阶能耗数据的计算和可视化?
  • C 语言 【模拟实现内存库函数】
  • 三、损失函数
  • 数据结构与算法之矩阵: Leetcode 48. 旋转矩阵 (Typescript版)
  • 计算机网络-应用层(3)
  • Docker Nginx安装使用以及踩坑点总结
  • GCC、g++、gcc的关系
  • 第13期 | GPTSecurity周报
  • p5.js 渐变填充的实现方式
  • yarn install 这个命令安装如何加速
  • 手把手教你通过 AGP + ASM 实现 Android 应用插桩
  • STM32 TIM(四)编码器接口
  • 【Gan教程 】 什么是变分自动编码器VAE?
  • 力扣每日一题79:单词搜索
  • mac 查看GPU使用
  • 改善游戏体验:数据分析与可视化的威力
  • 智能井盖监测系统功能,万宾科技传感器效果
  • conda 复制系统环境
  • electron27+react18集成搭建跨平台应用|electron窗口多开
  • QGIS008:QGIS拓扑检查、修改及验证
  • Spark On Hive原理和配置
  • 网络安全保险行业面临的挑战与变革
  • 65、内网安全-域环境工作组局域网探针方案