当前位置: 首页 > news >正文

js setTimeout、setInterval、promise、async await执行顺序梳理

基础知识

async: 关键字用于标记一个函数为异步函数,该函数中有一个或多个promise对象,需要等待执行完成后才会继续执行。

await:关键字,用于等待一个promise对象执行完,并返回其中的值,只能在async函数内部使用。可以将异步操作转化成同步代码。

在看一道引发血案的面试题的时候,将其整体的流程梳理了下流程,顺序并将代码的执行逻辑也整理了出来。执行结果如下:

在执行完成之后,自己在末尾加上了setInterval方法,及时调换了两者的顺序,也会发现,先执行setTimeout,然后再执行setInterval方法。整理后的代码如下:

console.log("script start 1")async1()
async function async1(){console.log("async1 start 2 第二步")//等async执行完毕之后,继续按照asyn2下方的代码执行await async2()console.log("async1 end 6 步骤6" )
}
//待执行到promise完成之后,await 收到对应的执行返回状态,继续往下执行 步骤6
new Promise(function(resolve){console.log("promise1 4")//执行成功 resolve,//await 接收到Promise返回的函数,会接着往下执行第6步;// resolve 代表成功的状态,在async1 函数执行完之后,接着执行接着执行then下面的函数;如果没有该段代码,则不执行 步骤7resolve()
}).then(function(){console.log("promise2 7")
})async function async2(){//执行完async2,但是没有Promise对象返回,会继续记性往下执行console.log("async2  3")
}console.log("script end 5")
//在setTimeout执行完成之后,继续执行定时器 setInterval方法
setInterval(()=>{console.log("set interval")
})
//在函数都执行完成之后,接着执行异步操作 延时 setTimeout 
setTimeout(()=>{console.log('settimeout')
})

综上所得,async 先执行,接着执行promise,await执行返回之后,在继续执行then中内部的函数,再顺序接着执行setTimeout和setInterval。

相关文章:

  • 30.包名的修改和新建后端模块
  • 【UE5.1 角色练习】06-角色发射火球-part2
  • 温故而知新-Java基础篇【面试复习】
  • C#-根据日志等级进行日志的过滤输出
  • FreeRTOS面试题汇总
  • vmware - 主机向虚拟机拷贝文件的临时方法
  • JAVA开发面试超详细
  • 若依nodejs版本过高问题解决方案
  • 【vue】封装的天气展示卡片,在线获取天气信息
  • spring boot 之 集成 druid数据库连接池
  • ACM实训
  • 反射的基本知识
  • 【Linux】套接字的理解 基于TCP协议的套接字编程(单/多进程 / 线程池|英汉互译 / C++)
  • 如何安装 Docker
  • 基于微信小程序的校园捐赠系统的设计与实现
  • python3.6+scrapy+mysql 爬虫实战
  • canvas 五子棋游戏
  • es6要点
  • extract-text-webpack-plugin用法
  • JavaScript DOM 10 - 滚动
  • js
  • PHP 的 SAPI 是个什么东西
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 彻底搞懂浏览器Event-loop
  • 翻译 | 老司机带你秒懂内存管理 - 第一部(共三部)
  • 每天10道Java面试题,跟我走,offer有!
  • 免费小说阅读小程序
  • 前端之React实战:创建跨平台的项目架构
  • 前言-如何学习区块链
  • 使用putty远程连接linux
  • ​2020 年大前端技术趋势解读
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • ​configparser --- 配置文件解析器​
  • ​TypeScript都不会用,也敢说会前端?
  • ​虚拟化系列介绍(十)
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • #Datawhale X 李宏毅苹果书 AI夏令营#3.13.2局部极小值与鞍点批量和动量
  • #VERDI# 关于如何查看FSM状态机的方法
  • (3) cmake编译多个cpp文件
  • (Java)【深基9.例1】选举学生会
  • (亲测有效)推荐2024最新的免费漫画软件app,无广告,聚合全网资源!
  • (四)鸿鹄云架构一服务注册中心
  • (一) 初入MySQL 【认识和部署】
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)
  • (转)创业家杂志:UCWEB天使第一步
  • .NET Core 网络数据采集 -- 使用AngleSharp做html解析
  • .NET Core跨平台微服务学习资源
  • .Net MVC + EF搭建学生管理系统
  • .NET/C# 编译期能确定的字符串会在字符串暂存池中不会被 GC 垃圾回收掉
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地中转一个自定义的弱事件(可让任意 CLR 事件成为弱事件)
  • .NET国产化改造探索(三)、银河麒麟安装.NET 8环境
  • .net专家(张羿专栏)
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决
  • [04]Web前端进阶—JS伪数组
  • [23] 4K4D: Real-Time 4D View Synthesis at 4K Resolution