IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> setTimeout、Promise和async/await的执行顺序 -> 正文阅读

[JavaScript知识库]setTimeout、Promise和async/await的执行顺序

要了解代码的执行顺序,必须先了解JS的运行机制

  • 为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成这门语言的核心特征,将来也不会改变。所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。
  • JavaScript单线程任务被分为同步任务和异步任务
  • 同步可以保证顺序一致,但是容易导致阻塞;异步可以解决阻塞问题,但是会改变顺序性,根据不同的需要去写你的代码。
  • 同步任务会在调用栈中按照顺序等待主线程一次执行;异步任务会在异步任务有了结果后,将注册的回调函数放入任务队列中,等待主线程空闲的时候,被读取到栈内等待主线程的执行。
  • 同步代码执行完成后,才会再去执行异步,哪怕异步已经到了执行的时间了。
  • JavaScript中,任务被分为宏任务和微任务。
    宏任务:script全部代码、setTimeout、setInterval、事件绑定、ajax、回调函数、Node中fs可以进行异步的I/O操作。
    微任务:Promise、await
  • 执行栈在执行完同步任务后会检查执行栈是否为空,若为空,就会去检查微任务队列是否为空,如果为空就执行宏任务,否则先执行所有微任务。
  • Promise本身是同步的立即执行函数,它的.then()和catch()方法是异步的(微任务)。
  • async/await是建立在Promise机制之上的。当调用一个async函数时,会返回一个Promise对象,而await操作符后面的表达式就是这个Promise,返回值实际上就是Promise的回调函数resolve的参数。
  • async方法执行时,遇到await会立即执行表达式,async表达式定义的函数是立即执行的;await表达式后面的代码放在微任务执行。
    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.log('setTimeout')
	},0);
	async1();
	new Promise(function(resolve){
	    console.log('promise1');
	    resolve();
	}).then(function(){
	    console.log('promise2')
	});
	console.log('script end')

答案:
在这里插入图片描述

    new Promise(function(resolve){
	    console.log('promise1');
	    resolve();
	}).then(function(){
	    console.log('promise2')
	});
    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.log('setTimeout')
	},0);
	async1();

	console.log('script end')

答案:
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-02 23:13:11  更:2021-11-02 23:13:17 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/12 5:13:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码