js 微观任务、宏观任务、循环机制

2023-11-19

javascript是单线程语言,就是因为单线程的特性;就不得不提js中的同步和异步。

同步和异步:
所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就是同步任务,比如简单的逻辑操作及函数,而异步任务不会立马执行,会挪步放到到异步队列中,比如ajax、promise、事件、计时器等等。

先执行同步,主线程结束后再按照异步的顺序再次执行。

事件循环:同步任务进入主线程,立即执行,执行之后异步任务进入主线程,这样循环。

宏观任务和微观任务(先执行微观任务,再执行宏观任务);

在事件循环中,每进行一次循环操作称为tick,tick 的任务处理模型是比较复杂的,里边有两个词:分别是 Macro Task (宏任务)和 Micro Task(微任务)。

简单来说:

宏观任务主要包含:setTimeout、setInterval、script(整体代码)、I/O、UI 交互事件、setImmediate(Node.js 环境)

微观任务主要包括:Promise、MutaionObserver、process.nextTick(Node.js 环境)

规范:先执行微观任务,再执行宏观任务

那么我们知道了,Promise 属于微观任务, setTimeout、setInterval 属于宏观任务,先执行微观任务,等微观任务执行完,再执行宏观任务。所以我们再看一下这个代码:

console.log(‘开始111’);

setTimeout(function() {

console.log(‘setTimeout111’);

}, 0);

Promise.resolve().then(function() {

console.log(‘promise111’);

}).then(function() {

console.log(‘promise222’);

});

console.log(‘开始222’);

我们按照步骤来分析下:

1、遇到同步任务,直接先打印 “开始111”。
2、遇到异步 setTimeout ,先放到队列中等待执行。
3、遇到了 Promise ,放到等待队列中。
4、遇到同步任务,直接打印 “开始222”。
5、同步执行完,返回执行队列中的代码,从上往下执行,发现有宏观任务 setTimeout 和微观任务 Promise ,那么先执行微观任务,再执行宏观任务。

所以打印的顺序为: 开始111 、开始222 、 promise111 、 promise222 、 setTimeout111 。

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

js 微观任务、宏观任务、循环机制 的相关文章

  • 使用 PHP 和 MySQL 的服务器端事件

    我正在使用 PHP 和 MySQL 构建一个 非常基本的 应用程序 该应用程序的目的是在网页上显示 实时 数据交易 这些交易来自于transactionsMySQL 数据库中的表 到目前为止 我可以在网页上检索并显示数据 不过我期待看到数据
  • Jquery文件上传插件进度条

    这个插件 https github com blueimp jQuery File Upload wiki管理网页中的文件上传 并且可以在上传过程中添加很多 UI 元素 您创建一个输入文件类型元素 然后绑定 js 文件 使用实例化代码和 w
  • 使用 Gmail 上下文小工具访问附件

    我想将电子邮件及其附件从 Gmail Google Apps 保存到另一个数据库以实现类似 CRM 的功能 然而 根据docs http code google com apis gmail gadgets contextual 提取器无法
  • setTimeout 用于加载下拉列表中的项目

    我在用setTimeout克服 中提到的缓慢处理脚本警告 禁用 Internet Explorer 中的长时间运行脚本消息 https stackoverflow com questions 4460263 disabling the lo
  • Javascript 无法正确排序 DECIMAL 数字

    我有一些代码可以按字母顺序对名称进行排序 我遇到的问题是它处理小数的方式 它对名称进行排序 如下所示 我宁愿它按数字递增 DOG 1 0510 DOG 1 1031 DOG 11 1792 DOG 12 0920 DOG 12 1170 D
  • 如何从对象数组中删除所有重复项?

    This is a large array of objects e g let totalArray id rec01dTDP9T4ZtHL4 fields user id 170180717 user name abcdefg even
  • 在each() 和forEach() 中使用break 和 continue

    如果我们不能使用 break 和 continue 关键字 我不确定我是否理解函数式循环 映射的价值 我可以做这个 collections users models forEach function item index can t use
  • Webpack - 资产大小限制中的警告:以下资产超出了建议的大小限制 (244 KiB)

    当我在生产模式下运行 webpack 时 有资产规模限制 超出 的警告 我怎样才能运行而不出现这个错误 在我的项目中 我包含 css 并且我看到 webpack 构建中包含一些 node module 目录 但是如果我排除 css 的 no
  • UpdatePanel 启动脚本未执行

    我正在编写一个在 SharePoint 网站中使用的 ASP NET Web 部件 并尝试使用 UpdatePanel 来呈现查询结果 我想使用 JQuery 插件来修改从异步回发返回的表 但我无法让启动脚本在异步更新上执行 我发现这个帖子
  • 如何获取 Spotify API 的访问令牌?

    我已经研究 Spotify api 和示例源代码几天了 但我仍然不知道如何获取访问令牌来访问用户的播放列表数据 我已经到达了拉起登录窗口 用户登录 然后收到授权码的地步 此时 我尝试做这样的事情 window open https acco
  • JavaScript/jQuery - “$ 未定义 - $function()”错误

    我正在尝试运行 JavaScript jQuery 函数并且Firebug http en wikipedia org wiki Firebug 28software 29得到错误 is not defined function JavaS
  • 在 Windows 上静默安装 Qt55 Enterprise

    编辑 在 Qt 支持的帮助下 我已经解决了如何自动化 Qt 企业安装程序的这两个部分 下面是脚本调用 我正在尝试在 Windows 8 1 和 Windows 10 上静默安装 Qt 5 5 1 Enterprise 使用 script 开
  • 如何处理 setTimeout() 的多个实例?

    阻止创建 setTimeout 函数的多个实例 在 JavaScript 中 的最推荐 最佳方法是什么 一个例子 伪代码 function mouseClick moveDiv div 0001 mouseX mouseY function
  • FullCalendar:如何重新创建/重新初始化 FullCalendar 或批量添加多个事件

    我正在尝试将新事件批量添加到日历中 但未能找到方便的使用方法 所以我决定用新的事件数组重新初始化视图 所以我尝试了以下方法 var events title Event start new Date y m d 10 description
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • Kendo 刷新 (DropDownList.refresh()) 不起作用错误未定义

    我试图在另一个 DropDownList 更改后刷新下拉列表 但 Refresh 方法未定义错误正在升级 我尝试再次读取数据源 它显示它正在加载 但数据仍然相同 帮助解决这个问题请 Code DropDownList1 change fun
  • Dojo“正在加载”消息

    我是 Dojo 新手 所以我需要一些帮助 我的一些链接需要一段时间 当用户单击时 页面开始加载需要几秒钟 我想添加一条 正在加载 消息 我可以用 旧时尚方式 来做 但我想学习新的 更简单 更智能的 Dojo 方式 具体如何工作现在并不重要
  • javascript 闭包和对象引用

    我的情况有点晦涩难懂 主要是因为我认为我已经掌握了闭包 所以基本上我想要的是将集合重置为默认值 假设我有一个集合 它具有带有对象参数数组的构造函数 var c new collection x y z 然后集合定期更新 因为我没有保留数组的
  • 使用 javascript 从亚马逊 URL 中抓取 ASIN

    假设我有一个像这样的亚马逊产品 URL http www amazon com Kindle Wireless Reading Display Generation dp B0015T963C ref amb link 86123711 2
  • 用于替换前 5 个数字的正则表达式,无论它们之间有什么?

    我正在努力实现以下匹配 Input 123 45 6789 123456789 1234 正则表达式尝试输出 d 5 123 45 6789 123456789 1234 d 2 3 123 45 6789 123456789 1234 d

随机推荐

  • STM32入门——uKeil5 MDK 的使用(基于固件库)

    文章目录 1 Keil uVision5 MDK 是什么 2 建立一个标准库函数工程 2 1 前期准备 2 2 建立工程 2 3 建立组文件夹 2 4 添加文件 2 4 配置 魔术棒 选项卡 2 5 建立 main 函数 1 Keil uV
  • scala 学习笔记

    Scala Scala 和 java 关系 语言特点 Scala是一门以Java虚拟机 JVM 为运行环境并将面向对象和函数式编程的最佳特性结合在一起的静态类型编程语言 静态语言需要提前编译的如 Java c c 等 动态语言如 js Sc
  • 吴昊品游戏核心算法 Round 10 —— 吴昊教你下围棋(利用递归来解决吃子的问题)...

    如图所示 此即为日本动漫棋魂中的千年佐为 也就是SAI 众所周知 围棋的规则相比于中国象棋 国际象棋等等都简单许多 真是因为更简单的规则 才诞生 了更复杂的逻辑 目前的围棋AI还很不行 最NB的应该是日本人做出的后又经过众多中国的围棋爱好者
  • STM32使用HAL库,整体结构和函数原理介绍

    按照杨桃电子的说法 学习编程程序就是学习使用外设 然后需要在icode文件夹中创建对应的 c和 h文件 分三步来操作 1 学会编写板级驱动程序 2 学会在板级驱动程序中调用HAL库中的功能函数 3 学会在main 主函数中调用板级驱动程序
  • 跟李沐学AI——动手学深度学习 PyTorch版——学习笔记pycharm版本(第四天——10、11、12、13、14)2023.3.1

    前言 这是沐神的第十节课 是讲多层感知机的 需要掌握牢固 以后会经常写的 代码讲解 跳过从零开始实现 直接进入简单代码的讲解 导入包 import torch from torch import nn from d2l import tor
  • Git的基本使用

    Git的基本使用 一 本文主要介绍Git 实现基本的代码托管 适合初次接触Git的开发人员 高级用法请查阅后续文章 目录 Git用途 Git代码托管平台 Git工作流程 概念介绍 工作流程 Git使用步骤 版本管理 分支管理 常用的分支命名
  • 《图解物联网》--阅读笔记

    第1 章物联网的基础知识1 1 1 物联网入门 2 1 1 1 物联网 2 1 1 2 物联网的相关动向 2 1 2 物联网所实现的世界 3 1 2 1 泛在网络 社会 3 1 2 2 物 的互联网连接 4 1 2 3 机器对机器通信所实现
  • Java String类型和BigDecimal类型之间的转化及BigDecimal类型的介绍

    String和BigDecimal的相互转化 String a 50 00 字符串类型 必须是数字 否则会报错 java lang NumberFormatException 异常 BigDecimal b new BigDecimal a
  • 汇编语言有如下的汇编程序段,请完成code段中的代码,实现将string1段和string2段中的数据拷贝到string3段中,并且将string3段中的数据输出到屏幕。

    有如下的汇编程序段 请完成code段中的代码 实现将string1段和string2段中的数据拷贝到string3段中 并且将string3段中的数据输出到屏幕 题目 有如下的汇编程序段 请完成code段中的代码 实现将string1段和s
  • Bose700降噪体验

    戴了多年耳塞 还是决定买一块主动降噪的看看 第一款主动降噪耳机当然选择降噪最强的bose700 直接官方旗舰店买不废话 虽然是主动降噪 不过众所周知是主要降低频部分1KHz以下 所以呢 给小白的用话小白会说 人声 喇叭声 风扇声都是听得到的
  • 学习动态规划-子矩阵

    1 全为1的最大正方形 在一个由 0 和 1 组成的二维矩阵内 找到只包含 1 的最大正方形 并返回其面积 来源 221 最大正方形 解题思路 dp i j 表示以matrix i j 为右下角的全1的正方形的最大边长 很明显 当matri
  • C++ 之 String类详解

    String 小引 string类常用接口 常见构造 容量操作 访问操作 修改操作 string类非成员函数 模拟实现 小引 C语言中 字符串是以 0结尾的一些字符的集合 为了操作方便 C标准库中提供了一些str系列的库函数 但是这些库函数
  • MAC Android Studio 克隆新项目出现问题及解决方法

    目录 前言 重装Android Studio 卸载Android Studio 安装Android Studio 打开新项目 前言 MAC OS 10 15 1 使用Android Studio打开GIT克隆下来的新项目 报错1 Could
  • VS2022 E1696 无法打开源文件报错修改

    1 先检查安装时的配件都安装正确了没有 在工具栏位置打开 获取工具和功能 此时会跳转到我们一开始安装VS时要安装配件的界面 在该界面内 检查是否是 使用C 的桌面开发 的安装选项 如果不是的话就选中该应用并选择下载路径进行修改下载 2 如果
  • C++-std::unique_lock介绍和简单使用

    unique lock std unique lock比std lock guard更灵活 这种灵活性主要体现在以下几点 lock guard在构造时或者构造前 std adopt lock 就已经获取互斥锁 并且在作用域内保持获取锁的状态
  • Linux系统的安装(在VM虚拟机上安装CentOS 7)

    工具准备 物理计算机一台 配置要求 操作系统 win10 64位 大家基本上都是 硬盘可用容量 20G以上 内存容量 4G以上 虚拟机安装包 VMware workstation full 12 5 下载链接 点我下载 提取码 9gha C
  • 为什么程序员招聘都要5年经验起?因为他们懂Java8底层优化!

    一 前情回顾 上篇文章给大家聊了一下volatile的原理 具体参见 入坑两个月自研非外包创业公司 居然让我搞懂了volatile 这篇文章给大家聊一下java并发包下的CAS相关的原子操作 以及Java 8如何改进和优化CAS操作的性能
  • 在Qt中如何实现窗口交互

    首先介绍done函数 它的作用是 关闭当前窗口 同时返回一个状态信息 Qt助手解释 关闭对话框并将其结果代码设置为r 如果这个对话框显示了exec done 导致本地事件循环结束 exec 返回r void QDialog done int
  • checkbox样式改写

    div class checkbox font s div
  • js 微观任务、宏观任务、循环机制

    javascript是单线程语言 就是因为单线程的特性 就不得不提js中的同步和异步 同步和异步 所谓单线程 无非就是同步队列和异步队列 js代码是自上向下执行的 在主线程中立即执行的就是同步任务 比如简单的逻辑操作及函数 而异步任务不会立