JS 的同步异步、事件循环

news2024/9/30 3:19:27

js 执行过程:先执行同步代码在执行异步代码

案例1: 以下就是 同步代码异步代码,同步代码先执行,异步代码后执行

console.log(1); //1
setTimeout(()=>{
console.log(3) //2
},10)

案例2: 执行顺序

console.log(1) //1
setTimeout(()=>{
console.log(2) //5
},1000)
setTimeout(()=>{
console.log(3) //4
},100)
for(var i=0;i< 8;i++){
    console.log(4)//2
}
setTimeout(()=>{
console.log(5)//3
},0)

事件循环机制:主线程不断重复获取消息,执行消息,注意讲究的是先进先出的原则

1.主线程运行时,产生堆和栈,栈中的代码调用各种外部的API,

异步操作完成后,就在消息队列中排队,只要栈中的代码执行完毕

主线程(同步)就会读取消息队列,依次执行那些异步任务所对应的回调函数

异步任务:微任务、宏任务

宏任务:setTimeout ,ajax 就是与浏览器相关的
微任务:promise , async , await ,nextick 就是与JS 有关的
在执行的时候会优先执行为微任务,在执行宏任务

我们先看下面的代码:

1.第一段代码在主线程执行的时候,会判断他是一个异步代码,会扔到任务队列里面去
2.第二段代码执行的时候,判断是微任务,同时也会放到任务队列里面去
3.第三段是同步任务
4.第四段判断是微任务
setTimeout(()=>{//1.识别是异步代码,会放到任务队列(宏任务)
  console.log(1)  //(4)
},0)

new Promise((resolve,reject)=>{
   resolve()  //同步
}).then(()=>{ //异步  微任务
    console.log(200) //(2)
})
function f(){
    console.log(300); //(1)
}
async function f2(){
    await f();//同步  //微任务
    console.log(400) //异步  (3)
}
f2()

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

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

相关文章

ChatGTP--事务是否生效?

项目场景&#xff1a; 由于最近在做一个项目的cola代码改造,所以由于cola需要在 service 和 dao层中间加一层>>> gateway,和springcloud中的gateway不一样,这个仅仅是抽象了一层; 思考: 现在我的事务 依然在service中开启,那么我的事务经过了一个gateway后,再次调用d…

死锁/资源分配/银行家算法

一、死锁 1、原因 竞争资源/程序推进顺序不当 2、必要条件 1、互斥条件 2、请求和保持条件 3、不剥夺条件 4、环路等待条件 3、处理死锁基本方法 1、预防死锁(摒弃除1以外的条件) 2、避免死锁(银行家算法) 3、检测死锁(资源分配图) …

机器学习:图神经网络graph neural network

图神经网络 graph neural networks Neural network Graph GNN应用 关系是否可以提供一些额外信息&#xff0c;不止是考虑entity的特征&#xff0c;还可以考虑关系。 基于近朱者赤 近墨者黑的假设 用邻居更新利用信号系统中&#xff0c;先转到频域&#xff0c;再做基于频域的…

I - 太阳轰炸(组合数学Cnk n固定)

2023河南省赛组队训练赛&#xff08;二&#xff09; - Virtual Judge (vjudge.net) 背景&#xff1a;阿塔尼斯&#xff0c;达拉姆的大主教&#xff0c;在艾尔又一次沦陷之后指挥着星灵的最后一艘方舟舰&#xff1a;亚顿之矛。作为艾尔星灵数千年来的智慧结晶&#xff0c;亚顿之…

数据分享|ESA_WorldCover_10m_2020: 2020年的10米土地覆盖数据(WorldCover v100)

2021年10月,欧洲航空局(ESA)发布了2020年的10米土地覆盖数据(WorldCover v100),该数据基于哨兵1号和哨兵2号的数据,包含11个土地覆盖类别,整体精度达到了74.4%,目前在公开可获取的同类型数据产品里具有一定的优势。那么这份数据具体是什么样子,又该如何获取呢?让我们…

ffmpeg.dll丢失怎么办,有什么修复ffmpeg.dll的方法

如果你在运行某些音视频软件或游戏时遇到了“ffmpeg.dll丢失”的错误消息&#xff0c;这意味着你的Windows系统中缺少了ffmpeg.dll文件&#xff0c;这是一个必要的动态链接库&#xff08;DLL&#xff09;文件&#xff0c;用于支持许多音视频软件和游戏的运行。在这篇文章中&…

Ep_计网面试题-本地IP地址怎么一层层向上转换?

将数据加上报头打包在一起形成新的数据包继续往下一层传递。拆包的时候就是把数据包去掉包头作为新数据传给上一层 视频讲解: https://edu.csdn.net/course/detail/38090 点我进入 面试宝典 很多人不知道面试问什么,或者其他的XXGuide,那里边的太多没用的,也没有源码解析,都…

windows go基本环境安装

一.设置go环境变量 sysdm.cpl //go的安装路径 GOROOT=D:\Go //GOPATH 是 Go语言中使用的一个环境变量,它使用绝对路径提供项目的工作目录 GOPATH=D:\Go\gogopath// golang install 我这里选择D:/Go https://golang.google.cn/dl/

uniapp:3分钟搞定在线推送uni.createPushMessage,uni.onPushMessage

安卓端 在线推送功能演示&#xff1a; 1、dcloud后台申请开通uniPush dcloud后台 &#xff08;1&#xff09;&#xff1a;找到我的应用 &#xff08;2&#xff09;&#xff1a;点进去后&#xff0c;各平台信息&#xff0c;点击新增 &#xff08;3&#xff09;&#xff1a;填…

Web前端学习:五 - 练习

四二-四八&#xff1a;baidu糯米 44-48 1、写法1 &#xff08;1&#xff09;a.movie1 .Navigation .recommend .listbanner a.movie1{background: url(img/h_1.jpg) no-repeat 63px 9px;}表示a标签且class为movie1的元素 如&#xff1a; <a href"#" class&quo…

智能家居项目(七)之Libcurl库与HTTPS协议实现人脸识别

目录 一、前言 二、编译openssl支持libcurl的https访问 三、编写人脸识别代码 四、编程实现人脸识别第二次加入图片base64编码 五、总结 一、前言 上一篇文章我们调用libcurl库去访问了百度&#xff0c;访问的是http协议的百度云主页。那么现在我们要基于翔云人工智能平台…

计算机大小端

我们先假定内存结构为上下型的&#xff0c;上代表内存高地址&#xff0c;下代表内存低地址。 电脑读取内存数据时&#xff0c;是从低位地址到高位地址进行读取&#xff08;从下到上&#xff09;。 1、何为大小端 大端&#xff1a;数据的高位字节存放在低地址&#xff0c;数据…

数据库增删改查II

目录 1.约束 1.1null约束 1.2唯一约束 1.3默认值约束 1.4主键约束 1.5外键约束 2.新增 3.查询 3.1聚合查询 3.1.1.聚合函数 3.1.2group by子句 3.1.3 having 3.2联合查询 3.2.1内连接 3.2.2外连接 3.2.3 自连接 3.2.4子查询 3.2.5合并查询 1.约束 1.1null约…

两个适配器网络冲突,限制访问特定网址

两个适配器网络冲突&#xff0c;限制访问特定网址说明命令说明说明 因为工作需要&#xff0c;有线网络访问局域网服务器&#xff0c;限制特别策略访问&#xff0c;如禁止远程。此时如果想要远程&#xff0c;在连接手机热点就可以&#xff0c;但由于两个网络的存在优先级。就出…

五分钟学会接口自动化测试框架

今天&#xff0c;我们来聊聊接口自动化测试是什么&#xff1f;如何开始&#xff1f;接口自动化测试框架怎么做&#xff1f; 自动化测试 自动化测试&#xff0c;这几年行业内的热词&#xff0c;也是测试人员进阶的必备技能&#xff0c;更是软件测试未来发展的趋势。 特别是在…

怎么从零搭建vue项目(使用webpack手动搭建)

目录一、前提条件二、手动搭建vue项目的步骤&#xff1a;1. 创建项目2. 生成package.json文件3. 引入webpack和创建webpack.config.js文件4. 创建index.html&#xff0c;main.js文件5. 使用webpack命令编译6. 引入vue2&#xff0c;修改index.html&#xff0c;main.js文件7. 引入…

物理机不能访问虚拟机kali的web服务解决方案记录

目录 环境 问题描述 解决方案 知识补充 效果测试 其他思路 环境 kali&#xff08;nat模式&#xff09;&#xff0c;物理机&#xff0c;可互ping 问题描述 kali的web服务器不能在物理机上访问。 1.本机能ping通虚拟机 2.虚拟机也能ping通本机 3.虚拟机能访问自己的web …

Python基础知识——列表

列表 列表是可以存放任何数据&#xff0c;包括整型&#xff0c;浮点型&#xff0c;字符串&#xff0c;布尔型等等&#xff0c;是常用的数据类型之一。 1.列表的创建 列表也是一个可迭代对象 1. 普通形式l [1,2,3,4,5] ---整型列表l ["a","b","c&…

一篇搞懂tcp,http,socket,socket连接池之间的关系

前言 作为一名开发人员我们经常会听到HTTP协议、TCP/IP协议、UDP协议、Socket、Socket长连接、Socket连接池等字眼&#xff0c;然而它们之间的关系、区别及原理并不是所有人都能理解清楚&#xff0c;这篇文章就从网络协议基础开始到Socket连接池&#xff0c;一步一步解释他们之…

激光雷达上车「热」背后的焦虑

激光雷达的上车节奏正在加速。 高工智能汽车研究院监测数据显示&#xff0c;从2022年9月至今&#xff0c;中国市场乘用车月度前装标配搭载激光雷达一直保持在1.5万台以上&#xff0c;其中&#xff0c;去年12月更是单月冲破3万台大关。 本周&#xff0c;Luminar宣布扩大与梅赛德…