js中的任务处理机制

众所周知(不知道的话去查),js是以单线程的方式执行的,在执行的过程中,某一时刻上只能执行一个任务,也就是说,我们写好了代码后执行的时候,程序是根据代码从上到下依次排队执行,只有上一个任务执行完以后才会继续执行下一个任务。但这带来了一个问题,如果执行的过程中,有一个任务需要花费很长事件去请求某一数据,按照单线程同步执行的规则,下面的任务就要等待这一任务执行完毕以后才会继续上任务栈执行,这肯定是不行的。那怎么解决呢?

异步任务与事件循环(Event Loop)

上面我们提到了js的单线程同步执行机制,以及带来的问题,那这个问题的解决就涉及到了异步这个概念,从字面意思上就能看出,异步便是不同于同步范畴的一个概念。我们可以将它理解为一种消息通知的机制,当有一个任务在同步执行的时候,发现它需要去通过某一方式去实现某一个目的(如我们上面提到的去请求一个数据),但这个过程什么时候完成是待定的,那么我们就可以将这一过程(任务)单独放在一边(队列队列),等到主线程(同步任务)执行完毕,再从任务队列中等待继续执行的任务提到主线程中,这整个过程就是事件循环。
如下图,我们来总结下。
当js代码再执行的过程中,会分为同步任务和异步任务,同步任务是按照代码顺序依次执行的任务,而异步任务则是会被放在任务队列中等待执行的任务,再执行的过程中,主线程执行栈会优先执行同步任务,待同步任务执行完后,执行栈会读取任务队列中的回调函数,将回调函数放到主线程执行栈中执行,执行完毕又会继续读取任务队列中的回调函数,放到主线程执行栈中执行,如此往复的过程称为事件循环

在这里插入图片描述

宏任务与微任务

在 JavaScript 引擎中,异步任务分为两种类型:微任务和宏任务。

微任务是指在当前任务执行结束后立即执行的任务,它可以看作是在当前任务的“尾巴”添加的任务。常见的微任务包括 Promise 回调和 process.nextTick。
宏任务是指需要排队等待 JavaScript 引擎空闲时才能执行的任务。常见的宏任务包括 setTimeout、setInterval、I/O 操作、DOM 事件等。 JavaScript 引擎会先执行当前任务中的所有微任务,然后再执行宏任务队列中的第一个任务。这个过程会不断重复,直到宏任务队列中的任务被全部执行完毕。

事件循环的应用场景

  1. DOM 事件处理:通过监听 DOM 事件(例如 click、scroll 等),可以使用事件循环来异步更新 UI 或执行其他操作。
  2. 定时器:使用 setTimeout() 和 setInterval() 函数可以创建定时器,用于在指定时间间隔之后执行相应的操作。这些操作会被作为异步任务添加到任务队列中等待执行。
  3. 网络请求:当 JavaScript 需要发送网络请求时,可以使用 XMLHttpRequest 或 fetch API 发送异步请求,并将响应数据作为异步任务加入到任务队列中等待处理。
  4. Promise 和 async/await:Promise 和 async/await 是 JavaScript 中常用的异步编程方式,实际上它们底层都是基于事件循环机制实现的。通过将回调函数封装为 Promise 对象或 async 函数,可以让异步代码更加易读、易维护。
  5. Web Workers:Web Workers 可以让 JavaScript 在多线程环境下运行,从而避免阻塞主线程。Web Workers 使用了与事件循环类似的消息队列机制来实现异步通信。

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

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

相关文章

数据分析案例-社交媒体情绪数据集可视化分析(文末送书)

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

进程的控制

文章目录 进程退出进程等待进程程序替换 正文开始前给大家推荐个网站,前些天发现了一个巨牛的 人工智能学习网站, 通俗易懂,风趣幽默,忍不住分享一下给大家。 点击跳转到网站。 进程退出 进程的退出一共有三种场景。 程序跑完…

了解 Go 中原子操作的重要性与使用方法

引言 并发是现代软件开发的一个基本方面,而在 Go 中编写并发程序相对来说是一个相对轻松的任务,这要归功于其强大的并发支持。 Go 提供了对原子操作的内置支持,这在同步并发程序中起着至关重要的作用。在本篇博客文章中,我们将探…

别再让机会从指缝间溜走!社科院与杜兰大学金融管理硕士一同开创你的成功之路

新的一年,你的读研计划进行到哪个环节了呢?咨询社科院与杜兰大学金融管理硕士项目中,总听到有同学说,不着急,我先了解一下。你不知道是时间总是在指缝间溜走。别让犹豫成了我们前进的阻碍,马上行动早日遇到…

基于Springboot的计算机知识竞赛网站(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的计算机知识竞赛网站(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结…

通过一个例子演示golang调用C语言动态链接库中的函数

本例提供了cgo调用C函数的示例,也演示了如何将C函数打印内容保存到golang的变量中 目录和源码 目录结构 adminhpc-1:~/go/my_stdout$ tree . ├── include │ ├── mylibrary.c │ └── mylibrary.h ├── lib └── main.go2 directories, 3 files a…

产品老化试验目的、用途

什么是老化试验? 老化试验是通过模拟产品在使用过程中的老化情况,来评估产品在长期使用后的性能和可靠性。这种测试可以帮助制造商了解产品的寿命和耐久性,以及产品在不同环境条件下的表现。 模拟量采集/老化房采集软件 为什么需要进行老化试…

智慧公厕:让城市更智慧、更环保

在现代社会,智慧公厕作为城市管理的重要一环,是智慧城市的重要组成部分,其建设的价值十出突出,是公共厕所信息化升级改造的核心方案。如智慧公厕源头厂家广州中期科技有限公司,所自主研发的智慧公厕整体解决方案&#…

【HarmonyOS】鸿蒙开发之Video组件——第3.7章

Video组件内VideoOptions属性简介 src:设置视频地址。currentProgressRate:设置视频播放倍速,参数说明如下: number|string:只支持 0.75 , 1.0 , 1.25 , 1.75 , 2.0 。P…

安装 docker 可视化工具 portainer

portainer 官方网站 https://www.portainer.io/ 一、portainer 介绍 Portainer是一款开源的容器管理平台,它提供了一个直观易用的Web界面,帮助用户管理Docker容器集群、镜像、卷等资源。Portainer 支持多种 Docker 环境,包括本地Docker、Sw…

智能手表的革命性突破:TRIZ理论引领未来穿戴技术!

在科技日新月异的今天,智能手表已经从单纯的计时工具转变为集健康监测、信息通讯、娱乐休闲等多功能于一体的智能穿戴设备。而基于TRIZ理论的智能手表更是在这一变革中扮演着引领者的角色。TRIZ,即发明问题解决理论,是一套系统的创新方法学&a…

vue实现文件上传的功能

随着Web应用的发展,文件上传功能已经变得越来越常见。vue是一种流行的JavaScript框架,提供了便捷的方式来构建现代化的Web应用程序。在vue中,可以通过使用vue的Upload组件来实现文件上传功能。以下介绍如何使用vue来实现文件上传功能。 首先…

单例模式:饿汉式、懒汉式;线程安全的单例模式创建的6种方式

单例模式 单例模式Singleton是一种创建型模式,指某个采用Singleton单例模式,则这个类在同一个 JVM上,只能产生一个实例供外部访问,并且仅提供一个全局的访问方式。 懒汉式 懒汉式线程不安全 public class Singleton1 {privat…

迭代器模式(Iterator Pattern)

定义 迭代器模式(Iterator Pattern)是一种行为型设计模式,它提供了一种方法来顺序访问聚合对象中的各个元素,而不需要暴露该对象的内部表示。迭代器模式使得客户端代码能够独立于聚合对象的具体实现进行遍历操作。 在迭代器模式…

使用vue把一周的时间划分为可以选择多个阶段

提示:使用vue把一周的时间划分为可以选择多个阶段段(亲测有效) 一、直接复制以下代码 代码如下(示例): <template><div class="byted-weektime" @mousedown="dian" @mousemove="yi" @mouseup="li"><div class=&q…

连不上网的解决办法集--持续更新

连不上网的解决办法集–持续更新 1、有网卡&#xff0c;但网卡驱动失效 背景&#xff1a;有网络驱动但是依旧连不上网&#xff0c;只有inteV6有值&#xff0c;inte 没有值&#xff08;正常应该有个ipv4的信息&#xff09; 判断原因&#xff1a;可能是之前格式化磁盘驱动的时…

【iOS ARKit】协作Session

使用 ARWorldMap&#xff0c;能解决使用者再次进入同一物理空间时的AR 场景恢复问题&#xff0c;也能在多人之间共桌AR 体验&#xff0c;但这种共享并不是实时的&#xff0c;在载入ARWorldMap 后&#xff0c;设备新检测到的环境信息和使用者所做操作不会实时共享&#xff0c;即…

【MATLAB】 小波分解信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 小波分解算法 小波分解算法是一种数学方法&#xff0c;用于将信号分解为不同频率的小波成分。这种算法基于小波函数&#xff0c;可以用于信号处理、图像压缩和数据压缩等领域。小波分解算法的基本思想是…

nginx的nginx.conf的基本配置方法

#定义Nginx运行的用户和用户组 user www www; #nginx进程数&#xff0c;建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型&#xff0c;[ debug | info | notice | warn | error | crit ] error_log /var/log/nginx/error.log info; #进程文件 pi…

LeetCode59. 螺旋矩阵 II(C++)

LeetCode59. 螺旋矩阵 II 题目链接代码 题目链接 https://leetcode.cn/problems/spiral-matrix-ii/ 代码 class Solution { public:vector<vector<int>> generateMatrix(int n) {vector<vector<int>> res(n, vector<int>(n, 0));int startx …