JavaScript异步编程---同步模式、异步模式、回调函数

2023-11-05

概述

众所周知,当前主流的JavaScript环境都是以单线程模式去执行代码的。
其原因和当时设计该语言的初衷有关系,最早这门语言就是运行在浏览器上的脚本语言,目的是为了实现页面上的动态交互,其核心就是dom操作,该点决定了他必须要使用单线程模式,否则就会出现很复杂的线程同步问题。
该种模式的有点很明显就是安全,但是缺点也很明显,万一遇到某个特别耗时的操作,后面的任务都需要排队等待前面执行完毕。这样就会导致出现假死的情况。
为了解决上述的问题,将任务执行的模式分成了同步模式和异步模式。
下面将要涉及到的内容有:

  1. 同步模式与异步模式
  2. 事件循环与消息队列
  3. 异步编程的几种方式
  4. Promise异步方案、宏任务/微任务队列
  5. Generator异步方案、Async/Await语法糖

同步模式

顾名思义就是代码按顺序依次执行,后一个任务只有在钱一个任务执行完后才会执行。
单线程的情况下,大多数任务都会以同步模式执行,注意这个同步是指排队执行,不是同时执行。
下面以一段代码分析同步模式的执行过程。

首先JavaScript会在内部调用栈压入一个匿名的调用,可以理解为将所有代码都放入一个匿名函数中准备执行。

"在这里插入图片描述
然后先执行代码中的console.log(“start”)方法,执行完成后弹出。
函数的声明不会产生任何的调用,所以执行会继续往下走,随后执行test2(),压入调用栈,在执行test2()中,调用了test1(),也同样压入调用栈,在执行完毕后同样依次弹出调用栈。
调用栈中的内容清空时,也意味着这次的执行就结束了。

异步模式

不同于同步模式,异步模式的API不会等待这个任务的结束才开始下一个任务,对于耗时操作,异步模式会在开启之后立即往后执行下一个任务,后续逻辑一般会通过回调函数的方式去定义,在内部,好事任务完成之后就会自动执行传入的回调函数。
相比于同步模式,代码执行的顺序更加的混乱和难懂。
在这里插入图片描述
首先也是加载整体的代码,在调用栈中压入一个匿名的全局调用,回一次执行每行代码,对于console.log这样的同步api还是和同步模式一样的,先压栈,打印,再弹栈,然后就遇到了一个异步调用方法,同样也是首先将该调用压入调用栈,但是由于是异步调用,所以我们需要关注内部环境做了什么事情,在这个案例中,内部就是为这个函数开启了一个倒计时器,然后这个倒计时器会被单独放在一边,在开启倒计时后,对于settimeout的调用就执行完了,会弹栈,代码继续往下执行,再往下又遇到了一个settimeout,同理也是压栈,开启计时器,弹栈,最后执行console的打印。
这时,调用栈中已经清空了,这时候event loop开始起作用,负责监听调用栈和消息队列,一旦调用栈清空了,event loop就会从消息队列取出第一个回调函数,然后压入调用栈。由于两个倒计时的时间不同,明显的time2的计时器结束的更快,所以先结束,结束完了time2函数就会被放入消息队列的第一位,time1结束后就会放入第二位。一旦消息队列发生了变化,event loop就会监听到,然后把首个回调函数压入调用栈,开始新一轮的执行。
消息队列可以理解成一个待办的工作表。
总的来说异步调用的时序图如下图所示:
在这里插入图片描述

回调函数

实现异步编程方法的根本就是回调函数,时异步编程的根基。
由调用者定义,交给执行者执行的函数就叫回调函数。
简单的实例:
在这里插入图片描述

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

JavaScript异步编程---同步模式、异步模式、回调函数 的相关文章

  • 静态链接与动态链接

    C代码编译生成可执行程序会经过如下过程 链接就是把目标文件与一些库文件生成可执行文件的一个过程 1 什么是静态链接 静态链接是由链接器在链接时将库的内容加入到可执行程序中的做法 链接器是一个独立程序 将一个或多个库或目标文件 先前由编译器或
  • IDEA创建CLASS时自动生成头部文档注释

    注释效果 设置如下 if PACKAGE NAME PACKAGE NAME package PACKAGE NAME end parse File Header java ClassName NAME Author USER Descri
  • 经典css系列面试题。

    1 对BFC规范 块级格式化上下文 的理解 BFC 块级格式化上下文 一块独立的区域 有自己的规则 bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境 保护其中内部元素不受外部影响 也不影响外部 怎么触发BFC 1 floa
  • 降低电源纹波噪声的方法

    一 降低电源纹波噪声只需三步 降低电源纹波噪声只需三步 描述 在应用电源模块常见的问题中 降低负载端的纹波噪声是大多数用户都关心的 那么模块的纹波噪声该如何降低 下文为大家从纹波噪声的波形 测试方式 模块设计及应用的角度出发 阐述几种有效降
  • 服务器ibmc无法加载js文件,WEUI应用之JS常用信息提示弹层的封装

    weUI应用 自己用JS封装了几个常用的信息提示的弹层 测试页面的代码在后面有贴出 几个弹层如下图 HTML页面代码 weUI test 测试 function 提示弹层 取消关闭 确定做相应操作 dialog 标题1111111 内容11
  • ODrive踩坑(三)AS5047P磁编码器的ABI接口

    前两篇已经介绍过ODrive在Windows下的使用环境搭建 以及TLE5012B ABI编码器闭环运动的基本配置 ODrive教程资源导航 ODrive踩坑 一 windows下使用环境的搭建 odrivetool及USB驱动的安装 OD
  • Xftp使用root权限连接服务器时提示“ssh服务器拒绝了密码”

    参考网上很多方案修改过后还是不行 最终依据这篇博客修改后成功 原因是之前修改的配置文件不对 应该修改sshd config Xftp连接linux ubuntu 时提示ssh服务器拒绝了密码 请再试一次
  • MyBatis学习笔记:Mybatis简介

    MyBatis学习笔记 Mybatis简介 参考书籍 传统的JDBC编程 流程 缺点 Example ORM模型 Mybatis 起源 ORM模型 Example 参考书籍 深入浅出MyBatis技术原理与实战 ISBN 978 7 121
  • Unity--Awake()和Start()的区别

    Unity Awake 和Start 的区别 1 对象初始化之后先调用Awake 再调用Start 然后调用Update 2 无论脚本文件是否enable Awake 都会被调用 而Start 只在enable true的时候被调用 3 游
  • HttpClient上传文件

    1 Using the AddPart Method form表单上传两个文本 一个文件 上传文件及文本 throws ClientProtocolException throws IOException author ybwei Test
  • VSCode安装Esp-IDF开发环境(pip version)出错解决办法

    安装ESP IDF4 4 4版本出现如下错误 可以看出是pip版本问题 所以只需要在安装程序使用pip命令之前 完成pip的升级即可 好像下载4点几的版本会出现此警告 导致安装失败 而下面安装5 0 1版本的时候同样出现了此警告 但是能够安
  • day22 二叉树

    235 二叉搜索树的最近公共祖先 可以按照二叉树的最近公共祖先进行操作 也可以按照搜索树的特征 无需进行回溯 从上到下进行遍历 701 二叉搜索树中的插入操作 将固定的数值插入到合适的位置 450 删除二叉搜索树中的节点 分几种情况 删除节
  • 企业实践

    欢迎关注 全栈工程师修炼指南 点击 下方卡片 即可关注我哟 设为 星标 每天带你 基础入门 到 进阶实践 再到 放弃学习 花开堪折直须折 莫待无花空折枝 文章目录 0x00 前言简述 什么是裸金属服务器 什么是IPMI 它的用途是什么 0x
  • (Java)leetcode-113 Path Sum II(路径总和 II)

    题目描述 给定一个二叉树和一个目标和 找到所有从根节点到叶子节点路径总和等于给定目标和的路径 说明 叶子节点是指没有子节点的节点 示例 给定如下二叉树 以及目标和 sum 22 5 4 8 11 13 4 7 2 5 1 返回 5 4 11
  • Pytorch 基于经典模型LeNet-5训练MNIST数据集手写数字

    LeNet 5简介 LeNet 5官网链接 卷积神经网络是一种特殊的多层神经网络 与几乎所有其他神经网络一样 它们使用反向传播算法版本进行训练 它们的不同之处在于架构 卷积神经网络旨在通过最少的预处理直接从像素图像中识别视觉模式 他们可以识
  • node + selenium-webdriver 进行Web自动化测试

    1 环境安装 nodejs安装 webdriver安装 安装各浏览器的驱动 通过各浏览器的驱动程序 操作浏览器 chrome 驱动安装 每个版本的浏览器用到的webdriver不同 可以通过chrome右上角 gt 帮助 gt 关于 Chr
  • 定义和声明的区别

    对于变量来说 定义就是声明 例如 int a 我们可是说它是定义也可以说它是声明 但是对于函数来说定义和声明完全不是一回事 void sum int a int b 这是函数的声明 void sum int a int b 整体是函数的定义
  • 纯代码的3D玫瑰花,有个这个还怕女朋友不开心?

    先上效果图 再上代码
  • 【hortonworks/registries】Parameter Schema name is null

    1 背景 修改了hortonworks registries的0 9版本的源码后 加入了json格式 然后部署后 添加schema的时候报错如下 INFO 2020 08 18 07 04 18 802 com hortonworks

随机推荐

  • es6之对象的扩展

    function getPoint const x 1 const y 10 return x y getPoint x 1 y 10 CommonJS 模块输出一组变量 就非常合适使用简洁写法 let ms function getIte
  • 【Metashape精品教程4】软件设置

    Metashape精品教程4 软件设置 文章目录 Metashape精品教程4 软件设置 前言 一 一般 二 GPU 三 网络 四 Appearance 五 高级 六 Agisoft Metashape1 8专业版用户手册 前言 Metas
  • C - 一只小蜜蜂...

    有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房 不能反向爬行 请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数 其中 蜂房的结构如下所示 Input 输入数据的第一行是一个整数N 表示测试实例的个数 然后是N 行数据 每行包含两个整数a和b 0
  • Java UnknownHostException –服务器的无效主机名–如何解决?

    An UnknownHostException的快速指南 如果在为远程方法调用创建到远程主机的连接时发生java net UnknownHostException 则会抛出该快速指南 UnknownHostException的预防方法 1
  • cookie 和session 的区别详解

    原文地址 http www cnblogs com shiyangxt archive 2008 10 07 1305506 html 这些都是基础知识 不过有必要做深入了解 先简单介绍一下 二者的定义 当你在浏览网站的时候 WEB 服务器
  • 用Python进行面向对象编程:提高代码可重用性和扩展性

    数据来源 01 初识对象 生活中数据的组织 程序中数据的组织 使用对象组织数据 演示 演示使用对象组织数据 在程序中设计表格 我们称之为 设计类 class class Student name None 记录学生姓名 gender Non
  • [4G+5G专题-132]: 传输层 - 以太网电缆的类型(Cat5,Cat5e,Cat6,Cat6a)

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 https blog csdn net HiWangWenBing article details 121552941 目录 1 主要的技术
  • BUUCTF Misc 二维码 & 你jing然赶我走 & 大白 & N种方法解决 & 乌镇峰会种图1 & 基础po解

    目录 二维码 你竟然赶我走 大白 N种方法解决 乌镇峰会种图 基础po解 二维码 下载文件 一个二维码 使用 QR research扫描 扫描完提示flag就在这 把二维码拖入010 editor打开 有个txt文档 使用kali中的bin
  • win7安装vmtools

    打开该虚拟机的虚拟机设置 选择软盘 设备状态设置为启动时连接 连接选择使用物理驱动器并使用自动检测 如图所示 然后保存并退出设置 在虚拟机选项中就可以选择安装vmtools了 或者在该虚拟机中选择软盘进行安装
  • 一周简报(维护项目空间)

    这一周 是9月的第三周了 我依然战斗在XX海油上 本周我的主要任务是处理项目空间中的一个需求变更 顾客就是上帝 对于他们合理的需求 我们努力去做到尽善尽美 当然也要保证在客户要求的时间内去完成 在这个高节奏 快步伐的时代 效率和质量是大家追
  • Unity 游戏框架搭建 2019 (四十六) 简易消息机制

    在上一篇 我们接触了单例 使用单例解决了我们脚本之间访问的问题 脚本之间访问其实有更好的方式 我们先分下脚本访问脚本的几种形式 第一种 A GameObject 是 B GameObject 的 Parent 或者是中间隔着几个层级的 Pa
  • 蓝桥杯-高精度阶乘(Java代码)

    问题描述 输入一个正整数n 输出n 的值 其中n 123 n 算法描述 n 可能很大 而计算机能表示的整数范围有限 需要使用高精度计算的方法 使用一个数组A来表示一个大整数a A 0 表示a的个位 A 1 表示a的十位 依次类推 将a乘以一
  • 昆仑天工AIGC——基于Stable Diffusion的多语言AI作画大模型测评

    文章目录 1 AIGC 2 技术背景 2 1 Stable Diffusion 2 1 1 图像感知压缩 Perceptual Image Compression 2 1 2 隐扩散模型 Latent Diffusion Models 2
  • ModelSerializer序列化与反序列化(重点)

    视图类 class UserV3APIView APIView 单查群查 def get self request args kwargs pk kwargs get pk if pk user obj models User object
  • 2020年第十一届蓝桥杯第二场省赛B组C++题解

    2020年第十一届蓝桥杯第二场省赛B组C 题解 题单 第一题 第二题 第三题 第四题 第五题 第六题 第七题 第八题 题单 第一题 小蓝要为一条街的住户制作门牌号 这条街一共有 2020 位住户 门牌号从 1 到 2020 编号 小蓝制作门
  • Win10多用户远程桌面连接

    Win10远程桌面多用户连接 实验室的服务器需要多人同时登入 我在网上找到了能够成功使用Win 10 远程连接的方法 现在我把我的操作过程记录下来 供大家交流学习 文章目录 Win10远程桌面多用户连接 方法原理 一 使用步骤 1 下载RD
  • SeekBar自定义(颜色,大小,图片)

    要实现下面图的效果 import android os Bundle Seekbar 自定义 颜色 author Andy public class TestSeekBar extends Activity Override protect
  • Android Studio 3.0正式版填坑之路

    Android Studio 3 0启动图 序言 总看别人的文章 今天尝试着自己来写一篇 在逛论坛时候 无意间发现Android Studio 3 0正式版本推送更新了 早听说AS 3 0添加了许多新功能 然后手贱迫不及待地想先睹为快 结果
  • FreeRTOS系列

    本文主要介绍如何在任务或中断中向队列发送消息或者从队列中接收消息 使用STM32CubeMX将FreeRTOS移植到工程中 创建两个任务以及两个消息队列 并开启两个中断 两个任务 Keyscan Task 读取按键的键值 并将键值发送到队列
  • JavaScript异步编程---同步模式、异步模式、回调函数

    概述 众所周知 当前主流的JavaScript环境都是以单线程模式去执行代码的 其原因和当时设计该语言的初衷有关系 最早这门语言就是运行在浏览器上的脚本语言 目的是为了实现页面上的动态交互 其核心就是dom操作 该点决定了他必须要使用单线程