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

news2024/9/22 23:25:36

基础知识

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下面的函数;如果没有该段代码,则不执行 步骤7
	resolve()
}).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。

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

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

相关文章

RT_Thread内核源码分析(一)——CM3内核和上下文切换

目录 一、程序存储分析 1.1 CM3内核寻址空间映射 1.2 程序静态存储和动态执行 二、CM3内核相关知识 2.1 操作模式和特权极别 2.2 环境相关寄存器 2.2.1 通用寄存器组, 2.2.2 状态寄存器组 2.2.3 模式切换环境自动保存 2.2.4 函数调用形参位置 2.3 …

OC IOS 文件解压缩预览

热很。。热很。。。。夏天的城市只有热浪没有情怀。。。 来吧,come on。。。 引用第三方库: pod SSZipArchive 开发实现: 一、控制器实现 头文件控制器定义: // // ZipRarViewController.h // // Created by carbonzhao on 2…

solidworks 3D草图案例2-方块异形切

单位mm 单位mm 长方体 底面是48mm*48mm,高为60mm 3D草图 点击线,根据三视图,绘制角度线, 由于三点确定一个面,因此确定三点就可以了 基准面 点击参考几何体-基准面,依次点击3个点 曲面切除 完成后点击插…

02--大数据Hadoop集群实战

前言: 前面整理了hadoop概念内容,写了一些概念和本地部署和伪分布式两种,比较偏向概念或实验,今天来整理一下在项目中实际使用的一些知识点。 1、基础概念 1.1、完全分布式 Hadoop是一个开源的分布式存储和计算框架&#xff0…

Serverless应用引擎SAE评测|一分钟部署在线游戏

Serverless应用引擎SAE评测|一分钟部署在线游戏 什么是Serverless应用引擎SAE一分钟部署在线游戏SAE控制台 资源释放其他操作 在进行Serverless应用引擎SAE评测之前,首先需要了解一下什么是SAE。 什么是Serverless应用引擎SAE Serverless应用引擎SAE(Se…

超频是什么意思?超频的好处和坏处

你是否曾经听说过超频?在电脑爱好者的圈子里,这个词似乎非常熟悉,但对很多普通用户来说,它可能还是一个神秘而陌生的存在。 电脑超频是什么意思 电脑超频(Overclocking),顾名思义,是…

C++面向对象程序设计 - 标准输出流

在C中,标准输出流通常指的是与标准输出设备(通常是终端或控制台)相关联的流对象。这个流对象在C标准库中被定义为std::cout、std::err、std::clog,它们是std::ostream类的一个实例。 一、cout,cerr和clog流 ostream类…

VLDB ’25 最后 6 天截稿,58 个顶会信息纵览;ISPRS 城市分割数据集上线

「顶会」板块上线 hyper.ai 官网啦!该板块为大家提供最新最全的 CCF A 类计算机顶会信息,包含会议简介、截稿倒计时、投稿链接等。 你是不是已经注册了顶会,但对截稿时间较为模糊,老是在临近 ddl 时才匆忙提交;又或者…

监控云安全的9个方法和措施

如今,很多企业致力于提高云计算安全指标的可见性,这是由于云计算的安全性与本地部署的安全性根本不同,并且随着企业将应用程序、服务和数据移动到新环境,需要不同的实践。检测云的云检测就显得极其重要。 如今,很多企业…

模拟量4~20mA电流传感器接线方式

一、模拟量4~20mA电流传感器接线方式 无源双线制是常见的电流型传感器接线方式,它具有简单、经济的特点。其接线方式如下: 传感器的“”接到数据采集器的电源“”上, 传感器的“-”端子连接到数据采集器的“AI”端子上, 数据采集器…

翻译《The Old New Thing》- What did MakeProcInstance do?

What did MakeProcInstance do? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20080207-00/?p23533 Raymond Chen 2008年02月07日 MakeProcInstance 做了什么? MakeProcInstance 宏实际上什么也不做。 #define MakeProcInst…

HackTheBox-Machines--Beep

Beep测试过程 1 信息收集 nmap端口扫描 gryphonwsdl ~ % nmap -sC -sV 10.129.137.179 Starting Nmap 7.94 ( https://nmap.org ) at 2024-05-28 14:39 CST Nmap scan report for 10.129.229.183 Host is up (0.28s latency). Not shown: 988 closed tcp ports (conn-refused…

python办公自动化——(二)替换PPT文档中图形数据-柱图

效果: 数据替换前 : 替换数据后: 实现代码 import collections.abc from pptx import Presentation from pptx.util import Cm,Pt import pyodbc import pandas as pd from pptx.chart.data import CategoryChartData…

C语言 数组—— 一维数组下标越界问题分析

目录 数组元素的访问 一维数组元素的越界访问 二维数组元素的越界访问 小结 数组元素的访问 访问数组元素时, 下标越界 是大忌!  编译器通常不检查下标越界,导致程序运行时错误  下标越界,将访问数组以外的空间  …

如何学到数据库从入门到入土(MySQL篇)

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人能接…

开源AI模型:未来发展的领航者!

开源AI模型简单概述 开源AI模型是指那些其源代码可以自由使用、修改和分发的人工智能模型。这些模型通常由社区成员共同开发,并且可以在遵守相应许可证的前提下被任何人用于商业或研究目的。开源AI模型的出现极大地推动了人工智能技术的发展,使得更多的…

uniapp - 文章模块页面

在上一篇文章中,创建了一个空白的文章模块页面。在这一篇文章,让我们来向页面中填充内容。 目录 页面效果涉及uniapp组件1.view2.swiper3.scroll-view4.属性解读1) class"style1 style2 .."2) circular单属性无赋值3) :autoplay"autoplay…

gitlab将本地文件项目上传至gitlab服务

打开gitlab网页界面,登陆管理员账号 (测试服务器安装的gitlab,浏览器输入ip或配置的gitlab地址) 创建新项目 使用gitlab创建项目 创建一个新项目(忽略分组) (忽略分组) 在创建工…

网络原理-------TCP协议

文章目录 TCP协议TCP协议段格式TCP原理确认应答机制 (安全机制)超时重传机制 (安全机制)连接管理机制 (安全机制)滑动窗口 (效率机制)流量控制 (安全机制)拥塞控制 (安全机制)延迟应答 (效率机制)捎带应答 (效率机制) 基于TCP的应用层协议 TCP协议 TCP, 即 Transmission Contr…

鸿蒙OS开发:【一次开发,多端部署】(导航栏) 导航栏

一多导航栏 介绍 本示例展示了导航组件在不同设备形态下的样式。 在sm设备上,以tabs形式展示,内容、导航为上下样式布局,通过点击底部tabs切换内容;在md/lg设备上,以[SideBarContainer]形式展示,内容、导…