js执行顺序

最新推荐文章于 2024-03-09 22:59:25 发布
前端小白，请多指教 最新推荐文章于 2024-03-09 22:59:25 发布
阅读量1.3w 收藏 92
点赞数 24
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/m0_58709757/article/details/123813227
版权

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里的定时器

输出结果 

 

 

 

前端小白，请多指教
关注 关注
  • 24
    点赞
  • 踩
  • 92
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
js执行上下文
xiaohesong
07-18 1012
我们通过引擎执行知道代码执行走向,但是他具体是怎么执行的呢 这就要从他的执行上下文(execution context)来说起来。 执行上下文 执行一段代码，就会存在上下文。上下文主要分为两种: global context function context 看下图，比较直观 可以很清楚的看到，最外层的就是全局上下文，函数里的是function context, 里面的exec...
js代码执行顺序之我见
qq_46358639的博客
03-04 249
js代码执行顺序之我见 前言：随着这几天对于js深入的学习，看到书上给出的一些源代码实在是疑惑不解；有时候拉出一个没见过的函数，找半天一看这函数在下半部分代码里呢，还是程序员自己定义的；对于我这样的小白来说，如果没有对js代码的执行顺序有一个认识，看起别人的代码来实在是吃力啊。 我也翻阅过了网上大部分关于js代码执行顺序的文章，今天我就将从这些文章里吸取到的知识，总结出来，以一个通俗易懂的方式解释...
JavaScript执行顺序详细介绍
10-26
主要介绍了JavaScript执行顺序，有需要的朋友可以参考一下
JavaScript 执行顺序梳理 ， 建议收藏！
Jack, what else can you do besides holding your little darling?
10-19 1377
一.概念 1.解释型语言执行步骤 预编译 扫描上下文。扫描错误 函数和变量声明的提升 解释执行 一条一条执行代码 2.任务队列event queue ????异步任务进入event queue任务队列 所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务
javascript按顺序加载运行js方法
10-18
本篇文章主要教给大家如何在javascript中动态加载按顺序加载运行js的方法以及实现代码，需要的朋友参考学习下吧。
js中的事件执行顺序梳理
WANG944282的博客
04-18 8074
js的事件执行顺序梳理
js【深度解析】代码的执行顺序
最新发布
朝阳39的博客
03-09 947
我们将每一句要执行的 js 代码当做一个任务，则 js 代码可以按照其执行方式的不同，按下图分类微任务：被放入微任务队列（micro task queue）中等待执行的代码因为Promise、async 、await 都是 ES6 语法定义的宏任务：被放入 Web APIs 中等待执行的代码因为 setTimeout 、setInterval 都是浏览器定义的。
JavaScript--代码执行顺序
wjbltxx的专栏
03-14 1433
第一个微任务执行完毕，开始执行第二个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务process.nextTick，输出2，4，3，5；开始执行第三个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务，输出9,11,10,12。3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。此时，主代码块执行完毕，即第一个宏任务执行完毕，开始执行微任务，输出 6，8；1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
js的执行顺序
smallNut的博客
02-16 3159
JS的运行机制 先来一个今日头条的面试题 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.l
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
10-30
近来我通过一些测试以全面的解析网页在各种浏览器中的JavaScript代码的执行顺序，在这儿做个记录。
页面中js执行顺序
10-29
页面中js的执行顺序：在页面的head标签中添加一段js代码，在页面的尾部也就是</body>之前添加一段代码，然后在body的onload事件中引用一个函数，此三者的执行顺序如何?
浅谈Javascript 执行顺序
10-26
主要介绍了Javascript 执行顺序，有需要的朋友可以参考一下
js 程序执行与顺序实现详解
10-27
JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行，浏览器对于不同的方式有不同的解析顺序，详细介绍如下，感兴趣的朋友可以参考下哈
js执行顺序问题
xiaohuihui_z的博客
08-16 1649
在实践中才慢慢明白了js执行顺序问题 遵循事件循环机制，当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。对于同步任务来说，会被推到执行栈按顺序去执行这些任务。对于异步任务来说，当其可以被执行时，会被放到一个 任务队列（task queue） 里等待JS引擎去执行。当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，
JavaScript执行顺序总结
qq_41872385的博客
03-11 4357
js的执行顺序
js代码执行顺序
宇世无情的博客
02-19 541
js代码执行顺序
【JavaScript】JS引擎中执行上下文如何顺序执行代码
m0_74166311的博客
06-08 494
运行3.2return语句表示完成该函数执行，second()的执行上下文将从调用栈中弹出(此处虽然弹出，但是其中变量环境仍可能被使用，涉及到闭包的概念)，调用栈重新指向first()，代码重新跳转回2.3；：ES6新特性，类似于函数作用域，指的是大括号括起来的块，比如if和for循环，块中的变量只能在块中访问，具有块作用域。：代码编译完成后进入调用栈执行首先创建全局执行上下文（整个项目只有一个全局执行上下文），是用来执行顶层代码（函数除外，函数只在被调用的时候执行）。(执行环境)来完成；
js中如何顺序执行异步任务
Java_monkey_的博客
12-09 5501
现有a、b和c三个任务，如果其为同步任务，可以很简单地顺序执行，但如果其为异步任务，该如何顺序执行呢？
JS执行顺序从上到下实例
06-08
假设我们有以下的 HTML 和 JavaScript 代码： ```html <!DOCTYPE html> <html> <head> <title>JS执行顺序从上到下实例</title> <script src="script.js"></script> </head> <body> <h1>JS执行顺序从上到下实例</h1> <p>下面是一个简单的计算器：</p> <label for="num1">第一个数字：</label> <input type="number" id="num1"><br><br> <label for="num2">第二个数字：</label> <input type="number" id="num2"><br><br> <button onclick="add()">相加</button> <button onclick="subtract()">相减</button> <button onclick="multiply()">相乘</button> <button onclick="divide()">相除</button> <p id="result"></p> </body> </html> ``` ```javascript // script.js function add() { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; var result = Number(num1) + Number(num2); document.getElementById("result").innerHTML = "结果：" + result; } function subtract() { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; var result = Number(num1) - Number(num2); document.getElementById("result").innerHTML = "结果：" + result; } function multiply() { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; var result = Number(num1) * Number(num2); document.getElementById("result").innerHTML = "结果：" + result; } function divide() { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; var result = Number(num1) / Number(num2); document.getElementById("result").innerHTML = "结果：" + result; } ``` 在这个例子中，JavaScript 代码是通过 `<script>` 标签引入的，并且放在了 HTML 文档的 `<head>` 标签中。然而，由于这些 JavaScript 代码并不需要在文档加载完成之前执行，我们可以将 `<script>` 标签移到 HTML 文档的底部，以确保 JavaScript 代码的执行顺序是从上到下的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 前端项目部署到服务器 18474
  • js执行顺序 13047
  • echarts自动轮播 2172
  • 下载和预览文件 ---使用blob二进制大对象 1164
  • vue路由跳转统一地址报错 1127

最新评论

  • js执行顺序

    fuyec: 通俗易懂，简洁明了，好文

  • js执行顺序

    爬爬虎231216: 很详细，思路清晰

  • js执行顺序

    阿梨er: 确实很容易懂

  • 前端项目部署到服务器

    何苏三月: 任何web服务器都可以的

  • 前端项目部署到服务器

    你若安不好…: 感觉是不行的，

大家在看

  • 分享一个 .NET Core 使用选项方式读取配置内容的详细例子
  • 2024 Idea最新激活码 43
  • Leetcode3040. 相同分数的最大操作数目 II 347
  • 三千字长文！大语言模型LLM现有的几个技术难点与应用方向（科普向）-第一弹-幻觉现象 697
  • 前端面试题日常练-day70 【面试题】 243

最新文章

  • echarts自动轮播
  • vue路由跳转统一地址报错
  • 常规文件上传与下载
2022年7篇

目录

目录

评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值

深圳SEO优化公司河池品牌网站设计推荐荆州关键词按天收费哪家好曲靖网站制作设计公司柳州建网站公司鸡西百度爱采购哪家好定西网站建设多少钱新乡网站开发报价大芬网站开发多少钱大理外贸网站建设无锡网站推广工具哪家好孝感企业网站建设公司中山模板制作公司龙岩网站搭建多少钱阿里店铺托管价格开封网站优化按天扣费多少钱雅安网络营销推荐坪地建网站安阳网站优化按天扣费推荐咸宁百度竞价价格赤峰网站优化按天收费报价长春网站优化按天计费推荐渭南网站搜索优化报价福永网站优化按天扣费价格海西关键词按天计费推荐酒泉网站搭建价格张家口外贸网站建设推荐临汾建网站多少钱定西SEO按天计费多少钱菏泽推广网站价格百色网站优化按天收费推荐歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅：唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人？开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化