js执行顺序

news2025/1/20 17:06:16

1.首先js是单线程的

所有的同步任务都是按顺序依次执行的,前面的执行完了之后才会执行后面的任务。遇到计算量大的代码就会阻塞在这里。下面的代码就是打印输出10000次,当循环走完了之后 才会走后面的代码,输出的时间是981ms

输出981ms

2.因为js是单线程的,所有的任务都需要按顺序执行,那如果我在执行过程中开启了一个定时器,定时器延迟10秒执行,后面的代码是不是要十秒之后才执行呢?

测试一下

输出的结果表示:定时器后面的代码先执行了,而定时器里面的代码再10秒后执行了

 这是为什么呢?

因为js虽然是单线程,但是我们并不需要所有的代码都要依次执行,避免一些不必要的阻塞。所以就引入了事件循环队列。引入了事件循环队列之后,就将js中所有的代码分成了两大类 ,一类是同步代码,另一类是异步代码。同步代码的执行顺序总是早于异步代码。 可以理解成,js从上到下依次执行,遇到同步的就直接执行,遇到异步的,就将异步的代码放到最后再执行。

下面代码的执行顺序是可以这样理解, 从上到下依次执行。先执行一号代码,是同步的,就直接输出。然后执行到二号代码,是个定时器,定时器是异步的,所以放到最后面再执行。然后执行三号代码,三号是同步的,直接输出。然后执行到四号代码,四号代码也是定时器,是异步的,所以放到最后(这个时候四号的异步代码是在二号的异步代码后面的)。然后执行到五号代码,直接输出。这个时候同步的代码已经全部执行完了,就开始执行刚刚放到最后面的二号代码和四号代码。

所以输出顺序是 同步1,同步2,同步3,异步1,异步2

输出结果

 

 而实际上,就是将异步的代码放入任务队列中去,等同步的代码执行完了之后,然后再去执行任务队列里的任务。

 

 哪些任务会进入任务队列呢(异步任务有哪些)?

定时器,ajax异步请求,promise.then里的东西 等等

任务队列又分成两个,一个是宏任务队列,一个是微任务队列。微任务队列里的任务要优先于宏任务队列里的任务

宏任务:定时器等

微任务:promise.then()里的代码,promise是同步的,ajax异步请求等

上面代码的执行顺序是(结合图一起看):

1.遇到了1号代码,是同步的,直接执行 输出1号,同步1。

2.遇到了二号代码,是个定时器,是宏任务,异步的。所以先不执行,放入宏任务队列

3.遇到三号代码的promise,是个微任务,先不执行,放入微任务队列

4.遇到5号代码,是同步的,直接执行 输出5号,同步2

 

5.这个时候同步代码执行完了,然后去任务队列里找任务执行。任务队列里有两个队列,一个是宏任务队列,里面有个定时器。还有一个微任务队列,里面有个promse成功的回调。因为微任务执行顺序是先于宏任务的,所以会先执行promise里面的代码

6.执行promise里的代码,遇到三号代码了,是同步的 直接执行 输出3号,微任务1

7.继续向下执行 遇到4号的定时器了,4号定时器是异步的,并且是宏任务,所以先不执行,放入宏任务队列

 

8.这个时候微任务队列里已经没有任务了,所以去执行宏任务队列里的任务。宏任务队列里先在有两个任务,一个是2号的定时器,一个是4号的定时器。

9.按顺序,先执行2号定时器里面的代码,里面的代码是同步的,直接执行 输出2号,宏任务1

 

10.执行完宏任务里的第一个任务之后(2号定时器),看一下微任务队列里还有没有任务,   有的话就继续执行微任务队列里的任务,没有的话就继续执行下一个宏任务队列里的任务。

11.我们这里微任务队列已经没有其他任务了,所以继续执行宏任务队列里的任务。执行4号定时器,里面的代码是同步的,所以直接执行,输出 4号,promise里的定时器

输出结果 

 

 

 

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

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

相关文章

Plugin [id: ‘com.android.application‘, version: ‘7.*.*‘, apply: false] was not found 的解决办法

呜呜~ 在新建项目File->New->New Project->Empty Activity 后遇到以下情况:Plugin [id: com.android.application, version: 7.2.2, apply: false] was not found in any of the following sources: 问题1:配置了 proxy 把File | Settings | A…

vue3中使用vue-i18n(ts中使用$t, vue3不用this)

vue项目里多语言工具一直用的vue-i18n。 以前用的 vue2,也没啥大问题,就是配置好之后用t(“你的属性名”)就行,现在用vue3其实本来也没太大变化。 但是配置完之后,在html中用$t()没有问题,显示文案什么的一切正常。而在…

关于前端提示err_ssl_protocol_error错误的一次记录

当前端提示错误的时候按照 1.同步系统的时间,日期和区域 Chrome上出现“ err_SSL_protocol_error”的最常见原因之一是错误的时间和日期配置。错误的时区选择也会导致此错误。如果您在设备上遇到此错误,请快速修改时间,数据和区域设置。如果该…

2023高频前端面试题(持续更新 含答案)

1,es6有哪些新特性?ES6是2015年推出的一个新的版本、这个版本相对于ES5的语法做了很多的优化let和const具有块级作用域,不存在变量提升的问题。新增了箭头函数,简化了定义函数的写法,同时可以巧用箭头函数的this、&…

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

活动地址:CSDN21天学习挑战赛 用代码写出浪漫合集(爱心、玫瑰花) 本文目录: ​一、前言 二、用python、matplotlib、Matlab、java绘制爱心 (1)爱心图形1(弧线型)(显示…

【微信小程序】-- 案例 - 自定义 tabBar(四十六)

💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &…

uniapp 使用第三方UI库 uview-plus

前言:开发uniapp时,有些功能,使用UI库提供的更加方便和简单。所以我就搜索uniapp 的UI库,根据网上和uniapp的插件市场,确定使用uviewUI库。 uniapp项目使用的vue2 -----> 对应 uView uniapp项目使用vue3 -…

css3渐变色

作用:让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类:分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction…

Vue的事件处理,点击事件

目录 1、 v-on:click 绑定属性示例: 2、 v-on:click 绑定方法示例: 3、 v-on:click 绑定特殊变量示例: 4、事件处理的修饰符 按键修饰符: v-model表单修饰符: v-bind指令修饰符: 监听DOM事件使用的是v…

vue+mysql实现前端对接数据库

下载引入相关依赖 1、cnpm install --save mysql 2、cnpm install --save axios 3、cnpm install --save body-parser 4、cnpm install --save express 5、cnpm install --save crypto 在main中引入axios import Axios from axios Vue.prototype.$axios axios 配置连接…

使用python搭建一个简易的Web服务

介绍 简单的说,web服务器就是机器上监听了本地的IP和端口的一个进程,当有客户的请求进来时,它会响应客户的请求并返回相应的信息。客户端和服务端之间的通信基于HTTP协议,客户端可以是浏览器或者任何支持HTTP的应用。我们平时访问…

vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

1、自定义布局 查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: 目标效果: 在实…

OpenAI 成近期顶流团队?如何使用 OpenAI 和 Node.js 构建 AI 图像生成器?

摘要: 12月7号,知名人工智能研究机构 Open AI 在Youtub上发布视频介绍使用OpenAI 和 DALL-E 模型创建一个网络应用程序,该应用程序将根据输入的文本从头开始生成图像。https://www.youtube.com/watch?vfU4o_BKaUZE 前言💖 大家好&#xff0…

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

文章目录1. 复现错误2. 分析错误3. 解决错误4. 其他方法解决该错误1. 复现错误 在搭建vue-cli环境,用nginx做代理服务器,访问时却显示:Invalid Host header。 2. 分析错误 知其然,知其所以然,我们在解决该问题之前&am…

支付宝手机网站H5支付

手机网站支付产品介绍 | 网页&移动应用 为方便商家在移动端网页应用中集成支付宝支付功能,支付宝提供了手机网站支付能力。 流程简介:商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块,商家网页会跳转…

【报错】npm install --save core-js/modules/es.array.push.js

代码写着写着,一运行突然就报了下面这么个错误 一开始没细看,以为是自己代码逻辑哪里写错,但是检查了一遍下来,好像没啥问题呀 然后后面就跟着执行了一下npm install --save core-js/modules/es.array.push.js 哦豁,还…

【自学前端】我只学这些够吗?好难

表弟也终于到了马上要大学毕业的时间,然后听说我在做前端开发工作,就想着能不能和我一起搞一搞。 我说这又不是小时候一起去地里抓兔子,说走就一起走,拿上工具一起走了,这得学啊。看着表弟期待的眼神,他问了…

【CTF】buuctf web 详解(持续更新)

buuctf web[HCTF 2018]WarmUp[极客大挑战 2019]EasySQL[极客大挑战 2019]Havefun[强网杯 2019]随便注[ACTF2020 新生赛]Include[SUCTF 2019]EasySQL[极客大挑战 2019]Secret File[ACTF2020 新生赛]Exec[极客大挑战 2019]LoveSQL[GXYCTF2019]Ping Ping Ping[极客大挑战 2019]Kni…

从零开始的「校园商铺」毕设全栈开发—开题报告

☕前言: 不知不觉已经在大学中度过了四年时光,春暖花开、桃红柳绿,又到了一年毕设季,恰逢〖新星计划2023〗活动正好有毕设相关的创作方向,号称两小时带我搞定毕设,像我这样喜欢白嫖(&#x1f61…

【小程序从0到1】宿主环境|WXML|WXSS|JS逻辑交互

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥React/小程序React/小程序React/小程序&am…