【JavaScript】一文详解事件循环机制

目录

一、是什么

二、同步任务和异步任务

三、宏任务和微任务

小结:微任务是跟屁虫,一直跟着当前宏任务后面代码执行到一个微任务就跟上,一个接着一个。

例子理解:

五、题目巩固

六、总结


一、是什么

首先JavaScript是一种单线程语言,同一时间内只能做一件事情,所有的任务都需要排队完成。这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环。

为什么JavaScript不能有多个线程呢?

        作为浏览器脚本语言,JavaScript的主要用途是与用户互动以及操作dom节点。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,当JavaScript同时有两个线程,一个是在A节点上添加内容,另一个是删除A节点,这个时候浏览器不知道应该以哪个为准。

        为了避免这种复杂性,因此JavaScript只能是单线程。

二、同步任务和异步任务

JavaScript中,所有的任务都可以分为

  • 同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行
  • 异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时函数等

同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。

三、宏任务和微任务

异步任务又分为宏任务和微任务

常见的宏任务:

  • script(整体代码)
  • setTimeout
  • setInterval
  • postMessage、MessageChannel
  • setImmediate、I/O(Node.js)
  • UI交互事件
  • ajax请求

常见的微任务:

  • Promise.then

  • MutaionObserver

  • process.nextTick(Node.js)

任务的优先级: process.nextTick > promise.then > setTimeout > setlmmediate

小结:微任务是跟屁虫,一直跟着当前宏任务后面代码执行到一个微任务就跟上,一个接着一个。

例子理解:

五、题目巩固

console.log(1)setTimeout(()=>{console.log(2)
}, 0)new Promise((resolve, reject)=>{console.log('new Promise')resolve()
}).then(()=>{console.log('then')
})console.log(3)

 流程如下:

// 遇到 console.log(1) ,直接打印 1
// 遇到定时器,属于新的宏任务,留着后面执行
// 遇到 new Promise,这个是直接执行的,打印 'new Promise'
// .then 属于微任务,放入微任务队列,后面再执行
// 遇到 console.log(3) 直接打印 3
// 好了本轮宏任务执行完毕,现在去微任务列表查看是否有微任务,发现 .then 的回调,执行它,打印 'then'
// 当一次宏任务执行完,再去执行新的宏任务,这里就剩一个定时器的宏任务了,执行它,打印 2

六、总结

事件的循环机制规定了执行代码的顺序

  1. 先执行同步代码;
  2. 遇到异步宏任务则将异步宏任务放进宏任务队列中;
  3. 遇到异步微任务则将异步微任务放进微任务队列中;
  4. 当script整体代码所有同步代码执行完毕后,再将异步微任务从【任务队列】中调入【主线程】执行;
  5. 微任务执行完毕后再将异步宏任务从【任务队列】中调入【主线程】执行;微任务再跟着当前宏任务后面,代码执行到一个微任务就跟上,一个接着一个。
  6. 一直循环到所有任务执行完毕。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/31195.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用自己的数据集预加载 Elasticsearch

作者:David Pilato 我最近在讨论论坛上收到一个问题,关于如何修改官方 Docker 镜像以提供一个现成的 Elasticsearch 集群,其中已经包含一些数据。 说实话,我不喜欢这个想法,因为你必须通过提 entrypoint.sh 的分叉版本…

UEFI: 模块和包概述

UEFI规范中有两个最重要的概念:模块(Module)和包(Package)。 模块 Module UEFI上最小的可单独编译的代码单元,或者是预编译的二进制文件比如efi执行文件。 包 Package 由模块、平台描述文件(DSC)和包声明…

文章六:实际场景应用 - Git实战:解析Git在项目开发中的应用

开始本篇文章之前先推荐一个好用的学习工具,AIRIght,借助于AI助手工具,学习事半功倍。欢迎访问:http://airight.fun 概述 Git是当今最流行的分布式版本控制系统,广泛应用于软件开发和团队协作。在本文中,…

Jenkins+Docker+SpringCloud微服务持续集成项目优化和微服务集群

JenkinsDockerSpringCloud微服务持续集成项目优化和微服务集群 JenkinsDockerSpringCloud部署方案优化JenkinsDockerSpringCloud集群部署流程说明修改所有微服务配置 设计Jenkins集群项目的构建参数编写多选项遍历脚本多项目提交进行代码审查多个项目打包及构建上传镜像把Eurek…

react钩子函数理解

React钩子(Hooks)是React 16.8版本引入的一种特性,用于在无需编写类组件的情况下,在函数组件中添加状态管理和其他React特性。React钩子解决了函数组件在处理状态、副作用和代码复用方面的一些问题,使得代码更加清晰、…

[国产MCU]-BL602开发实例-DAC与音频播放

DAC与音频播放 文章目录 DAC与音频播放1、DAC介绍2、DAC驱动API介绍3、音频数据转换3.1 音频格式转换3.2 音频数据生成C数组4、DAC使用示例数模转换器(digital-to-analog converter,通常称为DAC)是一种数字与模拟转换器,,FIFO深度为1,支持2路DAC调制输出。 可用于音频播放…

数据库线程池可用线程分析

1.事情的起源 项目在跑的过程中,突然间报没有可用的连接数。这个时候,服务进程还在,但是只要涉及到数据库的操作都会报错。 2.排查的思路 事件发生后,我们重启服务,监控的Connections数是258个,某台机器…

Latex安装与环境配置(TeXlive、TeXstudio与VS code的安装)编译器+编辑器与学习应用

TeXlive 配置Tex排版系统需要安装编译器+编辑器。TeX 的源代码是后缀为 .tex 的纯文本文件。使用任意纯文本编辑器,都可以修改 .tex 文件:包括 Windows 自带的记事本程序,也包括专为 TeX 设计的编辑器(TeXworks, TeXmaker, TeXstudio, WinEdt 等),还包括一些通用的文本编…

Python获取淘宝详情API接口流程

随着电子商务的快速发展,越来越多的企业意识到利用API接口进行淘宝营销的重要性。万邦淘宝API接口凭借其稳定性和丰富的功能,成为众多商家的首选。本文将为您介绍如何利用万邦淘宝API接口开展营销,并附上相关代码,助您轻松开启电商…

就业前的准备:web前端面试题及答案

今天小编来发布一些收集到的常见web前端面试题以及很多同学在面试过程中遇到的一些不知道如何回答的难题,通过对这些问题的整理,大家也要重新的巩固自身的基础,为日后的就业提前做好准备: 1、什么是盒子模型? 在网页中&#xff…

行业追踪,2023-08-10

自动复盘 2023-08-10 凡所有相,皆是虚妄。若见诸相非相,即见如来。 k 线图是最好的老师,每天持续发布板块的rps排名,追踪板块,板块来开仓,板块去清仓,丢弃自以为是的想法,板块去留让…

【图像恢复】基于交替乘子方法(ADMM)图像恢复算法研究[固定点收敛和应用](Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

《Python入门到精通》函数详解

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:小白零基础《Python入门到精通》 函数 1、函数的调用2、函数的参数2.1、变量的就近原则2.2、传递参数2.3、形参和实…

易服客工作室:7个优质WordPress LMS线上教育系统插件比较(优点和缺点)

您是否正在为您的 WordPress 网站寻找最好的 LMS 插件?在线学习管理系统 (LMS) 插件允许您使用 WordPress 创建和运行类似 Udemy 的在线课程。 一个完美的 WordPress LMS 插件包括管理在线课程内容、处理订阅、运行和评分测验、接受付款等功能。 在本文中&#xf…

yolov5代码解读之yolo.py【网络结构】

​这个文件阿对于做模型修改、模型创新有很好大好处。 首先加载一些python库和模块: 如果要执行这段代码,直接在终端输入python yolo.py. yolov5的模型定义和网络搭建都用到了model这个类(也就是以下图片展示的东西):(以前代码没…

【学习日记】【FreeRTOS】调度器函数实现详解

写在前面 本文主要是对于 FreeRTOS 中调度器函数实现的详细解释,代码大部分参考了野火 FreeRTOS 教程配套源码,作了一小部分修改。 一、MSP 和 PSP Cortex-M有两种栈空间,主堆栈和进程堆栈。 MSP 用于系统级别和中断处理的堆栈 MSP 用于保…

linux配置上网 linux adsl拨号上网设置

Linux里面配置ADSL上网是件很麻烦的事。但配置完成之后就能开机自动拨号上网,可谓十分的方便。支持的系统有Redhat,CentOS,SuSE,FreeBSD,Ubuntu等常见的Linux。 工具/原料 ADSL网络,电信,网通,移动等常见宽带。 Linux系统的安装光…

MinGW-W64 下载、安装与配置(支持最新版的GCC,目前 GCC 13.2.0)

文章目录 一、简介1. MinGW 和 MinGW-W64 区别和联系2. MSVCRT 和 UCRT 介绍 二、下载1. 从 sourceforge.net 下载2. 从 github 下载3. 从 镜像站点 下载4. 自己编译 三、安装与配置1. 在线安装2. 离线安装3. 环境配置 四、总结 一、简介 1. MinGW 和 MinGW-W64 区别和联系 M…

LinearAlgebraMIT_8_TheRankOfMatrix

这节课中主要讲解根据秩来判断方程组/矩阵的(solvability)解情况,即通过秩来判断(aumented matrix)增广矩阵的解。我们需要直接求解方程组的解就是求解矩阵的解。 x.1 判断(非齐次线性方程组)Axb是否有解 我们以下面这个方程组为例,它具有3个约束条件和…

MyBatis and or使用列表控制or条件

背景&#xff1a;最近项目需要&#xff0c;师傅可以查找订单&#xff0c;而师傅是指定可以服务2到3个区域&#xff0c;故需要使用到and, or条件的组合&#xff0c;以下记一下代码。 最重要的代码是&#xff1a; 1、构建List<Consumer<LambdaQueryWrapper<T>>&g…