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 微观任务、宏观任务、循环机制 的相关文章

  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 可能未处理的承诺拒绝(id 0)类型错误 GET 或 HEAD 请求不允许主体

    import React from react import FlatList ActivityIndicator Text View from react native export default class FetchExample
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • JavaScript 添加布尔值

    console log true true 2 console log typeof true true number console log isNaN true true false 为什么两个布尔类型相加会产生一个数字 我有点理解 如
  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J

随机推荐

  • 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代码是自上向下执行的 在主线程中立即执行的就是同步任务 比如简单的逻辑操作及函数 而异步任务不会立