js执行时序 宏任务和微任务

2023-11-15

宏任务一般是:包括整体代码scriptsetTimeoutsetIntervalI/OUI render
微任务主要是:PromiseObject.observeMutationObserver process.nextTick

 

nextTick 优先级比 PromisemicroTask 高,setTimeoutsetInterval优先级比setImmediate高。

执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务(microTask)队列是否为空,如果为空的话,就执行Task(宏任务),否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后,检查微任务(microTask)队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务(microTask)后,设置微任务(microTask)队列为null,然后再执行宏任务,如此循环。

console.log('script start');

setTimeout(function () { console.log('setTimeout'); }, 0);

Promise.resolve().then(function () { console.log('promise1'); }).

  then(function () { console.log('promise2'); });

console.log('script end');

console.log('script start');

async function async1() {

  await async2();

  console.log('async1 end')

}

async function async2() { console.log('async2 end') };

async1();

setTimeout(function () { console.log('setTimeout') }, 0)

new Promise(resolve => {

  console.log('Promise');

  resolve()

}).then(function () {

  console.log('promise1')

}).then(function () { console.log('promise2') });

console.log('script end');

console.log('start');

setTimeout(() => {

  console.log('timer1');

  Promise.resolve().then(function () { console.log('promise1') })

}, 0);

setTimeout(() => {

  console.log('timer2');

  Promise.resolve().then(function () { console.log('promise2') })

}, 0);

Promise.resolve().then(function () { console.log('promise3') });

console.log('end')

执行结果:

console.log('C')
var p = new Promise((resolve, reject) => {
    console.log('A')
    resolve('B')

    Promise.resolve('D').then(res => {
        console.log(res)
    })
})
p.then(res => {
    console.log(res)
})
setTimeout(() => {
    console.log('I')
    Promise.resolve('G').then(res => {
        console.log(res)
    })
})
setTimeout(() => {
    console.log('F')
    Promise.resolve('H').then(res => {
        console.log(res)
    })
})
console.log('E')

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js执行时序 宏任务和微任务 的相关文章

  • 无法填充名为“status”的数组

    我正在尝试做一些非常简单的事情 在 Javascript 中初始化一个数组 而且它在 Google Chrome 中不起作用 这是代码 status for i 0 i lt 8 i status i false alert status
  • 在 Javascript 中本地化字符串

    我目前正在使用 resx文件来管理我的 NET 服务器端资源 我正在处理的应用程序还允许开发人员将 JavaScript 插入各种事件处理程序中以进行客户端验证等 对我来说本地化 JavaScript 消息和字符串的最佳方法是什么 理想情况
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 为什么“事件”在 Chrome 中全局可用,而在 Firefox 中则不然?

    在回答另一个问题时 出现了一个与event对象在匿名函数中可用 无需传入 在 Chrome 中 下面的代码工作正常 但 Firefox 会抛出错误 document ready function uspsSideboxTrackingClo
  • 缓存 firestore 中 get 的第一个实现

    我希望 firestore 每次都先从缓存中获取数据 根据 Firestore 文档 传递 缓存 或 服务器 选项必须启用相同的功能 下面的例子 db collection cities where capital true get cac
  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t
  • React/Redux bundle.js 太大

    我有一个小型的 React 项目 Webpack生成的bundle js大小为6 3Mb 如何将大小减小到 github webpack config js module exports devtool inline source map
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • 将 Google 电子表格解析为 Javascript 数组

    我有一个 Google 电子表格 https docs google com spreadsheets d e 2PACX 1vRc8Lx0N wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sn
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 在 jQuery AJAX 成功中从 MySql 获取特定响应

    好吧 我有这个 ajax 代码 它将在 Success 块中返回 MySql 的结果 ajax type POST url index php success function data alert data My Query sql SE
  • JavaScript 访问密码字段值是否被视为存在安全风险?

    如果安全 正确地存储密码是良好的风格和安全性 那么对于要求用户输入密码的网页来说不应该也是如此吗 考虑这个例子
  • toLocaleDateString() 在 Chrome 中如何工作?

    我理解了javascript方法toLocaleDateString 使用的计算机设置 让我们来W3Schools 示例 http www w3schools com jsref tryit asp filename tryjsref to
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr
  • 如何设置 Firebase 用户的显示名称?

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册
  • openssl_pkey_get_details($res) 不返回公共指数

    我在用着这个例子 https stackoverflow com a 12575951 2016196使用 php 生成的密钥进行 javascript 加密openssl图书馆 但是 details openssl pkey get de
  • NodeJS:如何获取服务器的端口?

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要

随机推荐

  • plsql链接服务器无响应,sqlplus 连接数据库无响应

    一批三台安装服务器 先后出现了sqlplus 连接数据库无响应问题 1 因为几乎同一时间出现问题 起初怀疑是网络组对网络有整体调整 后经过确认网络组有调整 但不影响我们的服务器 2 telnet server 1521端口正常响应 3 从终
  • 深度解析,抖音对口型唱歌类短视频内容制作流程,步骤技巧分享

    就像之前分享的信息差案例一样 任何时候都有信息差 但是还有一种叫认知差 就是认知高的人赚认知低的人的钱 不是有句话很火吗 你永远也赚不到认知以外的钱 更多精彩干货请关注共众号 萤火宠 你的认知很高 可以高客单价赚高认知人群的钱 但是也有些人
  • 图形学-改进的Bresenham算法

    图形学 改进的Bresenham算法 原理 代码 原理 虽然中点Bresenham算法是一种效率很高的算法 但也还有改进的余地 当然 其基本原理仍是每次在最大位移方向上走一步 而另一个方向上走还是不走取决于误差项的判断 根据中点Bresen
  • JSP和JavaBean

    8 JSP 8 1 什么是JSP Java Servlet Pages java服务器端页面 也和Servlet一样 用于实现动态Web技术 最大特点 写JSP就像是写HTML 区别 HTML只给用户提供静态的数据 JSP页面中可以嵌入Ja
  • 智慧政务行业发展报告

    转自微信公众号 智慧城市圈子邱文斌 一 智慧政务行业发展状况 从上个世纪90年代开始 政府信息化的建设就开始围绕 通 进行 而现今正逐渐过渡到 云 的建设 从网络的连通 数据的整合 到云的出现与整合 政府信息化的建设是一个漫长而又快速发展的
  • element-ui 实现多日期选择

    一 前端代码
  • Spring 多线程异步上传图片、处理水印、缩略图

    使用环境 SpringBoot FastDfs thumbnailator fdfs环境自己搞吧 thumbnailator maven依赖
  • C++中引用的用法以及将引用作为函数的形参

    在C 中引用就相当于是给变量起了一个别名 有点类似于指针 但是与指针又不同 引用的初始化 int i i 10 变量i的引用 引用必须在创建的时候就要初始化 而指针可以在任意的时候初始化 引用就相当于是给变量起了一个别名 int i r i
  • HTML基本结构

    HTML一般是在vscod中进行书写 后缀为html 其完整的基本结构如下 h1 一级标题 h1 每一个尖括号 lt gt 代表着标签或者说是元素 不同的标签代表有着不同的作用 标签一般成对出现后一个标签为前一个标签加一个 例如 但也有单个
  • 基于巴法云的esp8266实现温湿度、LED、sg90舵机和HC-RS04实现的小程序远程控制

    基于巴法云的esp8266实现温湿度 LED sg90舵机和HC RS04实现的小程序远程控制 具体代码 本项目想法已经在我脑海想了很久了 都没有时间去实现它 这次刚刚考完试就用了两天把它做了出来 希望对大家有帮助 有什么需要的可以在下面留
  • upload-labs:pass-10

    is upload false msg null if isset POST submit if file exists UPLOAD PATH deny ext array php php5 php4 php3 php2 html htm
  • 工厂三兄弟之工厂方法模式(四)

    5 重载的工厂方法 Sunny公司开发人员通过进一步分析 发现可以通过多种方式来初始化日志记录器 例如可以为各种日志记录器提供默认实现 还可以为数据库日志记录器提供数据库连接字符串 为文件日志记录器提供文件路径 也可以将参数封装在一个Obj
  • Puppeteer 安装与注意事项 《一》

    Puppeteer 安装与注意事项 1 安装node js 在使用puppeteer的时候 它一些低版本的node是不支持的 作者推荐使用8以上的版本 否则node在后面使用puppeteer的时候会 抛出 SyntaxError Unex
  • 从外部验证安全密码存储

    许多网站 包括 Adobe Yahoo LinkedIn Gawker等大型网站 不安全地存储用户密码 可以是纯文本格式的 也可以是加密的 可逆的 格式 或者是使用残破或蛮力的哈希函数 许多网站的密码存储机制仍然很差 所以呢 好吧 如果数据
  • js生成柱状图

  • 内存泄露的检测方法

    本文来自http blog csdn net lijun84 引用必须注明出处 在谈及内存泄漏时 对于没有太多经验的新人来说总是很头疼的一件事 因为如果项目早期没有将其纳入代码框架 后期部署上线之后 仅从进程 crash 的 dump 很难
  • openGauss学习笔记-36 openGauss 高级数据管理-TRUNCATE TABLE语句

    文章目录 openGauss学习笔记 36 openGauss 高级数据管理 TRUNCATE TABLE语句 36 1 语法格式 36 2 参数说明 36 3 示例 openGauss学习笔记 36 openGauss 高级数据管理 TR
  • Docker部署Emqx并配置ssl支持微信小程序

    1 端口介绍 1883 MQTT 协议端口 8084 MQTT SSL 端口 8083 MQTT WebSocket 端口 8080 HTTP API 端口 18083 Dashboard 管理控制台端口 2 拉取镜像 docker pul
  • 算法与数据结构—LeetCode刷题笔记

    算法刷题笔记 一 动态规划 53 最大子序和 300 最长上升子序列 70 爬楼梯 242 有效的字母异位词 463 岛屿的周长 文章与视频资源多平台更新 微信公众号 知乎 B站 头条 AI研习图书馆 一 动态规划 53 最大子序和 典型的
  • js执行时序 宏任务和微任务

    宏任务一般是 包括整体代码script setTimeout setInterval I O UI render 微任务主要是 Promise Object observe MutationObserver process nextTick