js异步执行顺序

JS中异步处理执行顺序 本文对JS执行做一个扩展。JavaScript是单线程语言,同一时间只能做一件事,只有当前一个任务结束,才会执行下一个任务。假如前一个任务执行时间较长,下一个任务还得等待前一个任务执行完成。在JS中有同步任务和异步任务,他们之间的执行有一定的顺序。 阅读详情

将同步代码放入setTimeout中,变成异步,则和ajax中的回调同为异步,则按照异步的方式来排列执行顺序。

由此引入异步之间的执行顺序问题!

首先常见的异步一般有:ajax可以异步也可同步、回调、setTimeout系列、事件绑定。 而es6中的新增的promise、async/await。

按照js的执行顺序,先执行同步,再执行异步。那么上面这些异步的执行之内该如何执行呢?

首先了解一下宏任务和微任务。

在js执行机制中,除了同步任务和异步任务,还有宏任务和微任务。

宏任务:整体代码script、setTimeout、setInterval。
微任务:Promise、Promise.nextTick、回调

在js执行的时候,会先执行同步,异步被放入异步队列中,而不同的异步任务会被放入不同的异步队列中。

每次js执行,先从整体scripts也就是一个宏任务进入,执行完里面所有的微任务以后(也就是同步任务被执行完),再去异步的任务队列中,找到下一个宏任务,执行里面的所有微任务,如果没有宏任务了,则执行任务队列中的所有微任务。

所以异步的执行顺序是按照谁是宏任务,谁是微任务来执行的。

JS异步操作的执行顺序 异步操作的执行顺序 今天尝试了一串代码: Promise.resolve().then(()=>{ console.log(1) }) setTimeout(()=>{console.log(2)},0) 最初的想法是,promise和settimeout同时开始,那promise中的代码执行肯定还需要时间吧,所以应该是先打印2,后打印1,但结果相反。 经过查阅一些文章之后,稍微总... 阅读详情

相关推荐

Javascript异步执行不按顺序解决方案

主要介绍了Javascript异步执行不按顺序解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

如何控制弹窗优先级?

工作中遇到一个需求,就是控制用户进入应用时自动打开弹窗的展示顺序。需求和现状用户进入应用时会展示一系列的弹窗,这些弹窗的展示内容以及展示与否取决于进入应用时的一系列请求结果。由于接口请求返回数据的时间不确定,所以依赖不同接口的弹窗之间的展示顺序也不确定,且多个弹窗会出现叠加展示的问题,用户体验很不好。产品需求就是希望弹窗的展示顺序可控,并且同时只展示一个弹窗。解决方案:J...

文摘资讯 2013

自制温湿度计——STM32-L432KC驱动lcd1602和dht11温湿度显示

先给大家甩一张图片哈(附上网址)简单说一下这块板子在这个小项目里的小缺点:一、引脚有点少,lcd1602本来有两种传输数据方式,一种是4bit,另一种是8bit,但是这块板子对于这个项目来说引脚有点少,所以建议用4bit模式。然而,在网上是很难找到设置4bit传输模式的lcd1602的,这也是为什么我写这个blog。二、mbed-os有时候会有大大小小的问题,搞人心态是真的。比如库函数离奇失踪,从官网上下载库函数失败,重装也解决不了然后莫名其妙好了。

m0_72994251的博客 3914

js中如何顺序执行异步任务

现有a、b和c三个任务,如果其为同步任务,可以很简单地顺序执行,但如果其为异步任务,该如何顺序执行呢?

Java_monkey_的博客 6623

避坑指南:GROMACS模拟中.tpr、.xtc、.edr、.cpt文件你用对了吗?从生成到分析全流程解析

本文详细解析GROMACS分子动力学模拟中.tpr、.xtc、.edr、.cpt等核心文件的使用技巧,从文件生成到轨迹优化、能量分析的全流程避坑指南。重点介绍拓扑文件校验、轨迹格式选择、周期性边界处理等实战经验,帮助科研人员高效管理模拟数据并准确提取关键能量信息。

weixin_30631587的博客 118

《大明王朝1566》中,朝廷财政危机无法解决的根源分析

财政困局中的财富最终流向三重黑洞:​皇室挥霍​(如嘉靖炼丹修殿)、特权阶层贪腐​(严党年入百万两盐税)、制度性损耗​(宗室供养、低效官僚)。更深层的“钱”其实是被禁锢在道德化治理的牢笼中——当国家用“黄河长江皆可为用”的权术思维替代制度性改革时,财政危机便成为帝制王朝无法逃脱的宿命。

为了小家奋斗 1977

js 异步执行顺序

js 异步执行顺序

hmily43的博客 2032

深度学习实战12(进阶版)-利用Dewarp实现文本扭曲矫正

大家好,我是微学A1, 我们在生活中会看到一些拍摄扭曲的图片,我们在通过OCR识别的时候,因为扭曲的厉害,而无法识别,我们需要对图片进行处理。

微学AI的博客 3157

JavaScript基础——异步任务的执行顺序

JavaScript的异步任务执行顺序,异步分为微任务和宏任务!

蜡笔不新的博客 775

SpringBoot 系列教程(十二):给大家推荐20个SpringBoot开源项目,私活必备

基于 SpringBoot2.x + Shiro 实现了用户管理、个人微信、支付宝支付,内置扫码支付、后台回调、订单查询、限流等一系列功能

Thinkingcao的专栏 2840

微调实操一: 增量预训练(Pretraining)

《微调入门篇:大模型微调的理论学习》我们对大模型微调理论有了基本了解,这篇结合我们现实中常见的场景,进行大模型微调实操部分的了解和学习,之前我有写过类似的文章《实践篇:大模型微调增量预训练实践(二)》利用的MedicalGPT的源码在colab进行操作, 由于MedicalGPT代码比较难以理解,而且模型只能从hugging face上下载,对于一些国内服务器无法访问,我重构了代码,让训练代码更有可读性,并参考LLAMAFactory的项目,增加了modelscope上下载模型,轻松在国内服务器运行.

youbingchen的博客 6993

js等待异步执行完再执行_JavaScript 中优雅使用顺序执行异步函数

火于异步1995年,当时最流行的浏览器——网景中开始运行 JavaScript (最初称为 LiveScript)。 1996年,微软发布了 JScript 兼容 JavaScript。随着网景、微软竞争而不断的技术更新,在 2000年前后,JavaScript 相关的技术基础准备就绪。 随后到 2005 年前后,以 Google 为首开始重视使用 AJAX(即 Asynchronous Java...

weixin_39851261的博客 2万+

【LIN总线测试】——LIN主节点物理层测试

LIN总线是基于UART/SCI(通用异步收发器/串行接口)的低成本串行通讯协议。其目标定位于车身网络模块节点间的低端通信,主要用于智能传感器和执行器的串行通信,而这正是CAN总线的带宽和功能所不要求的部分。本章节主要介绍LIN主节点物理层如何测试?

测试领域技术分享 5532

JavaScript同步执行、异步执行及异步事件队列中的执行顺序

首先明确两点: 1.JS 执行机制是单线程。 2.JS的Event loop是JS的执行机制,深入了解Event loop,就等于深入了解JS引擎的执行。 单线程执行带来什么问题? 在JS执行...

Wind_waving的博客 2573

图像处理入门007:图像处理中的数学基础:线性代数与卷积

一种:把 OpenCV 当黑盒,调用,效果不对就乱调参数;另一种:理解每个像素是怎么被周围邻域"加权平均"的,理解核翻转、边界填充、stride 的含义。前者能干活,后者能解难题。一旦遇到自定义核(比如 ISP 上的锐化)、深度学习反向传播、医学图像重建,你就必须把卷积、相关、矩阵乘法这些基本功捡回来。线性代数三件套:向量点积、矩阵乘法、线性变换;2D 卷积的数学定义:核翻转、滑动窗口、边界填充。并手写一个,验证它与和的结果完全一致(误差 < 1e-9)。f∗gn∑m−∞∞f。

专注:太空算力、AI infra、异构调度、大模型成本工程 387

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

JavaScript同步、异步、回调执行顺序分析

之所以会写这篇文章,是因为在做笔试题的时候,会遇到一题很经典的题目,关于setTimeout的输出结果,下面我们先来看一道题目: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000); } console.log(i);      我相信只要是做过前端笔试题

Wendy 1万+

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

JS异步执行顺序

JS异步执行顺序 今天在重温promise的时候,突然发现了一个有趣的题目: (function() { setTimeout(() => { console.log(0); }); new Promise(resolve => { console.log(1); setTimeout(() => { ...

dayTimeAffect的博客 1625

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

JS中如何循环遍历顺序执行异步操作

JavaScript 中如何循环遍历顺序执行异步操作 记录一下今天遇到的一个小问题:在循环遍历数组时,需要同步顺序执行异步操作 在查阅网上的博客时有几种这样的写法: function func () { arr.forEach((item, index) => { syncMethod(); }); } 首先这种方法肯定是不行的,所有的异步方法会同步开始执行,然后我看到了另一种写法 function func () { arr.forEach(async () => {

qq_45265059的博客 7972

JS中含有异步操作的执行顺序

看下面这个简单的例子,我们将会了解到JS异步操作的体现: setTimeout(function(){ console.log(9); },0); //设置一个定时器 console.log(5); 这段代码的输出顺序是什么? 如果你的答案是9,5.那么有点遗憾,输出顺序是5,9. Why? 在Javascript引擎线程中,存在着一个主线程和一个任务队列,同步任务会在其主线程中执行,而一...

zhang1339435196的博客 2427

JavaScript宏任务与微任务深度解析:JS异步执行顺序核心规则

JS 的事件循环里,主线程跑完同步代码后,不是随便从任务队列里抓任务执行的,而是有严格的顺序:先把所有微任务全执行完,清空微任务队列,才会去拿一个宏任务执行。微任务清空了,才去宏任务队列拿 setTimeout 的回调,打印 1。小索奇见过不少人踩这个坑,比如在 await 之后操作 DOM,以为能立刻拿到更新后的元素,结果发现拿的还是旧值,就是因为没搞懂 await 后续代码是微任务的缘故。下次再遇到异步代码顺序乱了,先别急着改延迟时间,先看看哪些是宏任务,哪些是微任务,按规则一推,答案就出来了。

思索的涟漪,突破自我 794

js异步之间执行的顺序

今天同事问了一个问题,怎么让ajax中的回调(保持异步)先执行,再让普通的function执行。。。 整了个解决办法: 如下: <!DOCTYPE html> <html> <head> <title>lhy1</title> </head> <body> <scrip...

HYJ851122的博客 511

java多个异步函数顺序执行_js多个异步请求,按顺序执行next

在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺序是一起;这里是按照顺序发请求方法 一 、首先创建一个迭代器,接收任意多个函数参数function nextRegister(){var args = arguments;var count = 0;...

weixin_36411884的博客 1011

js异步机制、事件循环、Promise执行顺序

前言看了阮老师的《JavaScript 运行机制详解:再谈Event Loop》,有些地方还是不太清楚,所以又查了一些资料,决定写篇文章总结一下。

1480

js中同步异步代码执行顺序

在JavaScript中,同步(Synchronous)和异步(Asynchronous)代码的执行顺序是理解JavaScript事件循环(Event Loop)和回调(Callback)、Promise、async/await等异步机制的关键。使用Promise和async/await可以使异步代码看起来更像同步代码,但它们的执行仍然是异步的。的回调函数之前被调用(因为它的延迟更短),但JavaScript的事件循环会确保它们都在同步代码之后执行,并且按照它们被添加到事件队列中的顺序执行。

m0_55747309的博客 469

JS篇 - 异步函数执行顺序问题

大家做笔试题的时候一定遇到过判断异步函数执行顺序的题目,包含setTimeout,setInterval,Promise,Async等等,来一道基础题,抛砖引玉一下: for (var i = 1;i < 6;i ++) { setTimeout(function fn() { console.log(i) },i * 1000) } 对于萌新来说,发现在控制台打印的是...

Max_Law的博客 3155
上一篇: 前端性能优化处理方法---懒加载
下一篇: vue 子组件会接收不同的数据类型,数据设置默认值的写法
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值