AJAX: 事件循环(举例细论)

概念:执行任务和收集异步任务,在调用栈空闲时,反复调用任务队列里回调函数的一种执行机制

原因:JavaScript 是单线程的,为了不阻塞 JS 引擎,设计执行代码的模型

JS内代码如何执行

执行同步代码,遇到异步代码就交给宿主浏览器环境执行。异步有了结果之后,把回调函数放到任务队列中排队,当调用栈空闲后,反复调用任务队列里的回调函数

案例

console.log(1)
setTimeout(() => {console.log(2)
}, 0)
console.log(3)
setTimeout(() => {console.log(4)
}, 2000)
console.log(5)

执行过程:

Untitled

1-JS引擎把console.log(1)放入调用栈中,执行后弹出

2-JS引擎发现setTimeout(…, 0) 是异步代码,于是将它放入宿主环境(浏览器)中,执行setTimeout(…, 0),完成后放入任务队列中

3-JS引擎把console.log(3)放入调用栈中,执行后弹出

4-JS引擎发现setTimeout(…, 2000) 是异步代码,于是将它放入宿主环境(浏览器)中,执行setTimeout(…, 2000)要等待2s,完成后放入任务队列中

5-JS引擎把console.log(5)放入调用栈中,执行后弹出

6-此时,JS的调用栈空闲,调用任务队列中的回调函数,先调用setTimeout(…, 0)中的回调函数console.log(2) ,执行后出栈。此时,JS的调用栈再次空闲,它会保持监视任务队列情况。当2s到时,会调用setTimeout(…, 2000)中的回调函数console.log(4) ,执行后出栈。

参考:AJAX-Day04-07.事件循环_哔哩哔哩_bilibili

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

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

相关文章

PHP与Golang对战:两种语言的比较与应用场景探讨

引言 在软件开发领域,选择一种合适的编程语言对于项目的成功至关重要。而在今天的文中,我们将探讨两个备受争议的编程语言——PHP与Golang之间的对战。通过比较它们的优势和应用场景,帮助开发者更好地了解如何选择适合自己项目的语言。 PHP的…

伙伴云CEO戴志康:我们为什么要做伙伴云?

分享嘉宾:戴志康,伙伴云CEO 以下为演讲实录⬇⬇⬇ 01选择人更少的一条路,从B级走向A级 我一直想和大家交流一个话题,关于我们为什么要做伙伴云。既代表我自己,同时也代表我们团队的一些想法。 我是一个怀疑论者。大…

Win10 配置NDK安装2023.7.19版本

NDK安装流程 1. 下载:2. 安装:3. 测试: 在大多数情况下,使用 Android SDK 管理器安装 NDK 会更轻松。本文单独安装NDK,但后续也可以使用管理器进行管理。 1. 下载: 地址 Fig.1 最新稳定版本 2. 安装&…

3.6 Bootstrap 导航元素

文章目录 Bootstrap 导航元素表格导航或标签胶囊式的导航菜单基本的胶囊式导航菜单垂直的胶囊式导航菜单 两端对齐的导航禁用链接下拉菜单带有下拉菜单的标签带有下拉菜单的胶囊标签页与胶囊式标签页 Bootstrap 导航元素 本文将讲解 Bootstrap 提供的用于定义导航元素的一些选项…

OpenCv之图像直方图

目录 一、基本概念 二、使用OpenCv统计直方图 三、使用掩膜的直方图 一、基本概念 图像直方图是用一表示教字图像中亮度分布的直方图,标绘了图像中每个高度值的像素数。可以借助观察该有方图了解需要如何调整亮度分布的直方图。这种直方图中,横坐标的左…

12. 一些开发中遇到的SQL问题

文章目录 一些开发中遇到的SQL问题1. sql报11090错误,原因可能是以下错误,在?占位符后有一个空格2. 占位符?的位置不能是表名,否则会无法进行预编译3. mysql中desc是关键字,如果字段名称为desc会报错4. 数据库中时间格…

Apikit 自学日记:如何测试多个关联的 API

肯定会有人好奇,如果有多个关联的 API 如何做测试呢?很简单!在 APIkit 中也有测试多个关联 API 的功能。 1、在流程测试用例详情页中,点击“ 添加测试步骤”,选择“从API文档添加API请求” 2、在对应的项目下选择关联的…

CSDN 周赛 62 期

CSDN 周赛 62 期 参赛体验选择题1234编程题1、题目名称:覆盖面积2、题目名称:机器猫参赛体验 这次没有出填空题,好评。 选择题四个,基本上,对数据库比较熟悉的人,应该都可以全部答对的。 编程题两个,嗯。。。。就是上周偷偷摸摸更新出来的四个题目之二。还以为不会出…

csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

文章目录 ⭐前言⭐利用inscode免费开放资源💖 在inscode搭建vue3tsant项目💖 调整配置💖 antd 国际化配置💖 用户store💖 路由权限💖 预览 ⭐结束 ⭐前言 大家好,我是yma16,本文分享…

3.10 Bootstrap 标签

文章目录 Bootstrap 标签标签 Bootstrap 标签 下面将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签&#xff0c;如下面的实例所示&#xff1a; <span class"label label-default">Label</span></…

如何二次封装一个el-table组件并二次复用

*注:示例使用的是vue3和element进行二次封装的 首先我们来看效果图&#xff08;总共可以分为以下几个模块&#xff09;&#xff1a; 表格数据操作按钮区域表格信息提示区域表格主体内容展示区域表格分页区域 表单搜索没有封装在这里是为了降低代码的耦合性(有兴趣的可以查看我…

python实现小波降噪

文章目录 小波分解小波系数小波降噪阈值确定的一些小知识点python 实现小波去噪小波分解 上图为对信号进行3层小波分解,其中,Approximation 为近似小波系数(信号的低频成分),Detail为细节小波系数(信号的高频成分),分解后得到四个小波系数分别为A3,D3,D2,D1。 小波系数 小…

图片速览 DCN K-means-friendly Spaces: Simultaneous Deep Learning and Clustering

本文使用了一种交替更新网络参数和聚类中心的方法。在网络更新完成之后&#xff0c;对于固定的网络参数和 M&#xff0c;再更新当前样本的分配向量。然后根据新的分配结果如式子3.8更新聚类中心&#xff1a; 注&#xff1a;文中还有问题是否能进行凸优化的部分 CG https…

MySQL日常操作记录

1.查看MySQL版本 select version();2.快速复制表结构&#xff0c;不包含相关主键及约束 create table user_test as select * from user where 12;3.uuid select uuid(),uuid_short();4.替换uuid()里的’-‘为’’ select replace(uuid(),-,);5.md5摘要 select md5(uuid()…

剑指29.顺时针打印矩阵 31 栈的压入,弹出序列 03 数组中的重复数字 53缺失的数字 04二维数组中的查找

class Solution { public:vector<int> spiralOrder(vector<vector<int>>& matrix) { if (matrix.size() 0 || matrix[0].size() 0&#xff09; return {};//必须要写到最前面&#xff0c;因为right和bottom-1就是负数了vector<int> result;int l…

ELK-日志服务【kafka-配置使用】

kafka-01 10.0.0.21 kafka-02 10.0.0.22 kafka-03 10.0.0.23 【1】安装zk集群、配置 [rootes-01 ~]# yum -y install java maven [rootes-01 ~]# tar xf apache-zookeeper-3.5.9-bin.tar.gz -C /opt/[rootes-01 ~]# cd /opt/apache-zookeeper-3.5.9-bin/conf/ [rootes-…

爬虫相关知识与面试题目

常见的反爬虫和应对方法 参考:https://www.cnblogs.com/bsdr/p/5151891.html 0x01 常见的反爬虫 这几天在爬一个网站&#xff0c;网站做了很多反爬虫工作&#xff0c;爬起来有些艰难&#xff0c;花了一些时间才绕过反爬虫。在这里把我写爬虫以来遇到的各种反爬虫策略和应对的…

剑指offer33.二叉搜索树的后序遍历序列

我一开始的想法是&#xff1a;后序遍历是左右根&#xff0c;那么第一个数小于第二个数&#xff0c;第二个数大于第三个数&#xff0c;然后从第三个数开始又循环&#xff0c;显然错了&#xff0c;因为我这种是理想情况&#xff0c;是一个满二叉树。正确的解法是: class Solutio…

正则表达式

一、正则表达式基本介绍 1. 介绍 一个正则表达式&#xff0c;就是用某种模式去匹配字符串的一个公式。很多人因为它们看上去比较古怪而且复杂所以不敢去使用&#xff0c;不过,经过练习后,就觉得这些复杂的表达式写起来还是相当简单的&#xff0c;而且&#xff0c;一旦你弄懂它…

Shuffle简单理解

map的结果本身是无序的&#xff0c;但是map输出的结果有序 mapper和reduce是不同的机器&#xff0c;进行了网络传输&#xff0c;所以存在数据拷贝 第二次排序&#xff0c;是将每个reduce对应的task进行排序&#xff0c;然后再进入reduce maptask运行结束&#xff0c;每个mask块…