浅谈 js运行机制 、宏观任务、微观任务

2023-10-26

                                        **今天我们谈一下我对js 运行机制 和宏观任务、微观任务的理解**

js运行机制有同步运行和异步运行
js是单线程运行模式在进入任务当中如果是同步任务 那么就直接被主线程运行 如果是异步任务 那么就进入任务队列中进行等待运行 直到主线程任务执行完毕那么这时候就会调用异步任务 如下面这张被我盗的图所示

在这里插入图片描述

串联一下子 也就是说 同步和异步进入不同的任务中 同步的进入 主线程 异步的进入event table中 然后会在event table生成回调函数到event queue中 当主线程任务结束后 会去event queue中读取对应的函数进行执行 以上过程不断重复就是 js运行机制 event Loop

以上是js代码的一个运行机制 下面呢我们来讲一下宏观和微观

异步又分为宏观微观 微观的优先级是大于宏观的 可能我描述的不清楚

宏观的事件有: html的解析 定时器 I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
微观的事件有:promise的then和catch 等
ps:promise 在许多文章上被直接定义为微观任务 其实是有一定错误 promise本身是宏观 他的回调函数是异步 也就是.then .cantch 是微观任务

下图是宏观任务和微观任务的运行 ps:盗的图哟!!!在这里插入图片描述
也就是说 在一个宏观任务中 只有微观任务全部运行完毕后才会继续执行下一个宏观任务

下面看一段代码
 setTimeout(() => console.log("d"), 0);
 Promise(function(resolve, reject) {
    console.log(66)
    resolve()
    }).then(() => {
       console.log(77)
 });
    console.log(88)

首先我们明确有几个宏观任务 setTimeout Promise 
微观任务有   Promise.then()

首先 setTimeout 是异步宏任务执行 所以被扔进了 异步队列中进行等待 然后遇到了 Promise 
promise本身是宏观任务 异步执行同步调用  所以会被主线程运行 所以 输出了 **66** 然后 
遇到了.then 发现是微观任务 那么就放入到 异步对列中  主线程又运行了  console.log(88) 输出了 88 接下来  
当主线成 任务运行完毕后 开始了调用异步对列中的函数调用 输出了77  
这里会有人问 为什么 setTimeout 也在异步队列 中 为什么不先执行 setTimeout 呢 上面是做了解释  
微观任务的  优先级比宏观任务高!!!所以先执行 .then() 输出77 再输出 d 
       
promise 是 宏观任务 同步调用 所以在主线程运行的时候他会直接运行 所以 他会比setTimeOut先执行
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

浅谈 js运行机制 、宏观任务、微观任务 的相关文章

  • angularjs:如何向资源对象添加缓存?

    在 http 中添加缓存非常简单 通过传递cache true http docs angularjs org api ng http https docs angularjs org api ng service 24http有缓存选项
  • HTML/VBA Click 事件未触发

    这是我第一次在 StackOverflow 上发布问题 到目前为止 我已经能够通过 VBA 帮助论坛解决我的大部分问题 我的问题很简单 我有一个自动数据拉取 我需要在其中导出数据 我过去曾在这方面取得过成功 但这次略有不同 我尝试单击以生成
  • 非 DOM 对象上的 jQuery 自定义事件

    我最近阅读了一些代码 其功能如下 bob name Bob Smith rank 7 bob bind nameChanged function bob trigger nameChanged 这似乎有效 但我在 jQuery 文档或源代码
  • Node js 使用中间件重定向进行过多重定向

    在我的 Node js 应用程序 我使用的是express 4 x 中 我想检查用户是否已登录 如果用户未登录 我想重定向到我的登录页面 然后我在中间件中这样做 服务器 js app use function req res next if
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • jQuery 选择 # id 以单词为前缀,计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口?

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式

随机推荐

  • git---查看当前账户和切换账户

    查看当前用户名和邮箱 git config user name git config user email 修改用户名和邮箱 git config global user name Your username git config glob
  • GPT-Tools Cookbook by Eric

    1 账号申请和登录 1 1 OpenAI 账号注册 可以参考 2 ChatGPT 的注册与登录 来自 涛哥ChatGPT和Python变现圈 选择账号邮箱 我们在尝试过直接使用邮箱注册OpenAI账号 试验了两次 都没有成功 Note 第二
  • SpringBoot 集成SpringBatch 批处理框架

    SpringBatch 核心组件简介 1 JobRepository 用来注册Job容器 设置数据库相关属性 2 JobLauncher 用来启动Job的接口 3 Job 我们要实际执行的任务 包含一个或多个 4 Step 即步骤 包括 I
  • 自然语言处理实战项目18-NLP模型训练中的Logits与损失函数的计算应用项目

    大家好 我是微学AI 今天给大家介绍一下 自然语言处理实战项目18 NLP模型训练中的Logits与损失函数的计算应用项目 在NLP模型训练中 Logits常用于计算损失函数并进行优化 损失函数的计算是用来衡量模型预测结果与真实标签之间的差
  • QQkey后门

    今天凌晨收到 LX2222 的举报反馈被盗号 发布的加速器盗取账号信息 https www 52pojie cn thread 785555 1 1 html 我们着手分析一下看看软件确实发现了问题 被添加了盗取QQkey的后门 通过拿到Q
  • SQL查询语句之查询数据

    目录 1 基本查询语句 2 单表查询 2 1 查询所有字段 1 列出表中的所有字段 2 使用 查询所有字段 2 2 查询指定字段 2 3 查询指定记录 2 4 带 in 关键字的查询 2 5 带 between and 的范围查询 2 6
  • HTML中Table表格的使用与漂亮的表格模板

    1 表格标记 表格是网页中十分重要的组成元素 表格用来存储数据 包含标题 表头 行和单元格 在HTML语言中 表格标记使用符号 table 表示 定义表格光使用 table 是不够的 还需要定义表格中的行 列 标题等内容 标记 说明 表格标
  • Vue2 项目里,使用 Element 的 dialog 里嵌套 tabs,导致关闭 dialog 时浏览器卡死问题

    Vue2 项目里 使用 Element 的 dialog 里嵌套 tabs 导致关闭 dialog 时浏览器卡死问题 解决办法 给 tab 添加 v if 绑定 dialog 的 visible sync
  • 如何查看awr/statspack报表,来定位系统的问题

    author skate time 2010 03 25 如何查看awr statspack报表 来定位系统的问题 数据库的性能指标一般都有什么 只有定好指标才能判定系统的性能 性能参考指标一般有如下几个 1 响应时间 平均每事务的响应时间
  • QT 使用QLibrary加载动态库

    简介 使用QLibraryi可以在程序运行时加载动态链接库 一个QLibrary的实例作用于一个单一的共享库上 QLibrary提 供了一种平台无关的方式访问库中的函数 可以在构建QLibrary的实例时将要加载的库文件传入 也可以在创建
  • python/元组、列表、字典

    Python 的元组与列表类似 不同之处在于元组的元素不能修改 元组使用小括号 列表使用方括号 字典使用 下面用一个实例来体验一下 s list input r 创建一个字典 for i in s r i r get i 0 1 看下文解释
  • 引爆点--读书有感

    有个理念一直在我心里 都说流行都是轮回 如何去让产品抓住流行趋势 究竟是什么造就了流行 如何去学习 看看周围的世界吧 它看上去似乎雷打不动 无法改变 但只要你找准位置 轻轻一触 它就可能倾斜 书籍理念 个别人物法则 附着力因素法则和环境威力
  • 单片机控制直流电机(风扇)电路详解

    单片机引脚为什么无法直接控制电机或风扇 我们在使用单片机去控制 5V的直流电机或者散热风扇时 可能会有一种疑惑 51单片机的引脚电压为 5V 为什么不直接用单片机引脚去驱动电机或者风扇 实际上单片机的控制引脚 不管是51单片机或者stm32
  • Linux安装python显示“软件包python没有可安装候选”

    在Linux中安装python时 调用 sudo apt get install python 命令出现以下问题 sudo apt get install python sudo lyx 的密码 正在读取软件包列表 完成 正在分析软件包的依
  • java中public/private/protected的具体区别

    java中public private protected的具体区别 public public表明该数据成员 成员函数是对所有用户开放的 所有用户都可以直接进行调用 private private表示私有 私有的意思就是除了class自己
  • 深度学习——更深层次的神经网络

    一个深层次的CNN网络结构 这里使用的卷积层全都是3 3的小型滤波器 特点是随着层的加深 通道数变大 卷积层的通道数从前面的层开始按顺序以16 16 32 32 64 64的方式增加 此外 插入了池化层 以逐渐减小中间数据的空间大小 并且
  • C++ 字符串

    C 提供了以下两种类型的字符串表示形式 C 风格字符串 C 引入的 string 类类型 C 风格字符串 C 风格的字符串起源于 C 语言 并在 C 中继续得到支持 字符串实际上是使用 null 字符 0 终止的一维字符数组 因此 一个以
  • OpenMV的单颜色识别讲解

    OpenMV的官方教程 寻找色块 single color rgb565 blob tracking示例讲解 视频讲解 需要提前看的文章 程序烧录 颜色阈值设置 目录 threshold index和thresholds解析 固定代码部分
  • Vue记住滚动条位置 scrollBehavior + debounce

    Vue记住滚动条位置 1 先给占位符加一层缓存 2 在路由上加一个源信息meta 记录滚动条的top值 3 使用 scrollBehavior 4 给页面添加事件监听 使用前端路由 当切换到新路由时 想要页面滚到顶部 或者是保持原先的滚动位
  • 浅谈 js运行机制 、宏观任务、微观任务

    今天我们谈一下我对js 运行机制 和宏观任务 微观任务的理解 js运行机制有同步运行和异步运行 js是单线程运行模式在进入任务当中如果是同步任务 那么就直接被主线程运行 如果是异步任务 那么就进入任务队列中进行等待运行 直到主线程任务执行完