js 宏观任务和微观任务 promise的代码为什么比setTimeout先执行

这篇文章是通过学习极客时间winter大大的《重学前端》中16| promise里的代码为什么比setTimeout先执行总结而来

宏观任务[MacroTask] 和微观任务[MicroTask]

第一次知道这个概念

promise

 var r = new Promise(function(resolve, reject) {console.log("a");resolve();});setTimeout(() => console.log("d"), 0);r.then(() => console.log("c"));console.log("b");// 执行顺序 a b c d

setTimeout(() => console.log("d"), 0);var r1 = new Promise(function(resolve, reject) {resolve();});r1.then(() => {var begin = Date.now();while (Date.now() - begin < 1000);console.log("c1");new Promise(function(resolve, reject) {resolve();}).then(() => console.log("c2"));});// 虽然第二个promise 间隔了1秒 但是还是 先于setTimeout执行// c1  c2  d

通过一系列的实验，我们可以总结一下如何分析异步执行的顺序：
首先我们分析有多少个宏任务；
在每个宏任务中，分析有多少个微任务；
根据调用次序，确定宏任务中的微任务执行次序；
根据宏任务的触发规则和调用次序，确定宏任务的执行次序；
确定整个顺序。

function sleep(duration) {return new Promise(function(resolve, reject) {console.log("b");setTimeout(resolve, duration);});}console.log("a");sleep(5000).then(() => console.log("c"));// 将setTimeout封装成可以用于异步的函数

async/await

– async用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。我们把所有返回 Promise 的函数都可以认为是异步函数。[所以它也是微观任务]

– await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

   var obj = document.getElementById("animate");function timeSleep(times) {return new Promise((resolve, reject) => {setTimeout(resolve, times);});}async function colorChange(color, times) {obj.style.backgroundColor = color;await timeSleep(times);}async function trafciLigth() {// while (true) {await colorChange("#27ED4E", 3000);await colorChange("red", 2000);await colorChange("yellow", 1000);// }}trafciLigth();

参考这篇文章也可以帮助理解https://www.jianshu.com/p/4516ad4b3048

js 宏观任务和微观任务 promise的代码为什么比setTimeout先执行相关推荐

浅谈js宏观任务、微观任务
js运行机制分为同步异步,异步又分为宏观事件和微观事件: 同步异步: js是一门单线程语言,因此js在同一个时间里只能做一件事,单线程意味着,如果在同个时间有多个任务的话,这些任务就需要排队,前一个执 ...
js宏观任务和微观任务
先来看这样一道面试题: async function async1() {console.log('async1 start')await async2()console.log('async1 en ...
js运行机制，宏观任务和微观任务
异步又分为宏观和微观微观的优先级是大于宏观的可能我描述的不清楚宏观的事件有: html的解析定时器 I/O.UI交互事件.postMessage.MessageChannel.setImmed ...
浅谈 js运行机制、宏观任务、微观任务
**今天我们谈一下我对js 运行机制和宏观任务.微观任务的理解** js运行机制有同步运行和异步运行 js是单线程运行模式在进入任务当中如果是同步任务那么就直接被主线程运行如果是异步任务那么就 ...
JS执行机制、同步和异步、宏观任务和微观任务
1. JS 是单线程 JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. 这是因为 Javascript 这门脚本语言诞生的使命所致--JavaScript 是为处理页 ...
js的循环机制、宏观任务与微观任务
javascript是单线程语言,EventLoop事件循环. 一.同步和异步: 所有的线程,都是有同步队列,和异步队列,立即执行的任务队列,这些都是属于同步任务,比如一个简单的函数:请求接口发送aj ...
量化因果涌现表明：宏观可以战胜微观
来源:集智俱乐部作者:Erik P. Hoel, Larissa Albantakis, Giulio Tononi 译者:赵婷婷审校:梁金编辑:邓一雪导语复杂系统内的因果关系可以从 ...
js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环 ...
c++定义一个动态全局变量_静态链接与动态链接的宏观概述及微观详解
静态链接与动态链接的宏观概述及微观详解第一部分宏观概述 1. 静态链接静态链接就是在程序运行前,链接器通过对象文件中包含的重定位表,完成所有重定位操作,并最终形成一个在运行时不需要再次进行依赖库 ...

js 宏观任务和微观任务 promise的代码为什么比setTimeout先执行

promise

async/await

js 宏观任务和微观任务 promise的代码为什么比setTimeout先执行相关推荐

最新文章

热门文章