setTimeout、Promise、Async/Await 的执行顺序

问题描述:以下这段代码的执行结果
    async function async1() {
        console.log(‘async1 start‘);
        await async2();
        console.log(‘asnyc1 end‘);
    }
    async function async2() {
        console.log(‘async2‘);
    }
    console.log(‘script start‘);
    setTimeout(() => {
        console.log(‘setTimeOut‘);
    }, 0);
    async1();
    new Promise(function (reslove) {
        console.log(‘promise1‘);
        reslove();
    }).then(function () {
        console.log(‘promise2‘);
    })
    console.log(‘script end‘);

解决问题:
要了解代码的执行顺序 必须先了解 JS的运行机制
  •  Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。
  • JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。
  •  Javascript单线程任务被分为同步任务异步任务,同步任务会在调用栈中按照顺序等待主线程依次执行,异步任务会在异步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。

JavaScript中,任务被分为两种,一种宏任务(MacroTask),一种叫微任务(MicroTask)。

MacroTask(宏任务)

  • script全部代码、setTimeoutsetInterval

MicroTask(微任务)

  • Promise、await

执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务队列是否为空,如果为空的话,就执行宏任务,否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后,检查微任务队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务后,设置微任务队列为null,然后再执行宏任务,如此循环。

运行之前我们需要知道以下几点

  • setTimeout属于宏任务
  • Promise本身是同步的立即执行函数,Promise.then属于微任务
  • async方法执行时,遇到await会立即执行表达式,表达式之后的代码放到微任务执行

下面我们就来运行代码

第一次执行:执行同步代码

Tasks(宏任务):run script、 setTimeout callback
Microtasks(微任务):await、Promise then
JS stack(执行栈): script
Log: script start、async1 start、async2、promise1、script end

第二次执行:执行宏任务后,检测到微任务队列中不为空、一次性执行完所有微任务

Tasks(宏任务):run script、 setTimeout callback
Microtasks(微任务):null
JS stack(执行栈): await、Promise then
Log: script start、async1 start、async2、promise1、script end、promise2、async1 end

第三次执行:当微任务队列中为空时,执行宏任务,执行setTimeout callback,打印日志。

Tasks(宏任务):null

Microtasks(微任务):null

JS stack(执行栈):setTimeout callback
Log: script start、async1 start、async2、promise1、script end、promise2、async1 end、setTimeout

关于73以下版本和73版本的区别

  • 在老版本版本以下,先执行promise2,再执行async1 end
  • 在73及以上版本,先执行async1 end再执行promise2
  • 具体资料可以查询  https://v8.js.cn/blog/fast-async/

 于是我们就得到了这段代码的执行结果(70版本)

(73及以上版本执行结果为)

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
 

原文地址:https://www.cnblogs.com/dajuyiding/p/11355677.html

时间: 2024-10-08 12:03:22

setTimeout、Promise、Async/Await 的执行顺序的相关文章

ES6 class setTimeout promise async/await 测试Demo

class Person { async getVersion () { return new Promise((resolve, reject) => { setTimeout(function () { resolve('1.0'); // reject('fail') }, 1000); }) } } const start = async () => { var p = new Person(); const data = await p.getVersion(); console.l

promise/async/await

promise和async/await都是异步方案,promise是es6的新特性,而async/await是es7新出的特性.而对于async/await来说是基于promise的,他可以让我们更加优雅的写出代码,而替代then()的写法,例如: const f = () => { return new Promise((resolve, reject) => { setTimeout(() => { reject(234); }, 2000); }); }; const testAs

js callback promise async await 几种异步函数处理方式

***callback  这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据 回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作,在函数的实现里调用回调函数,在函数的调用里实现回调函数 // 回調函數的方式 閉包 可以獲取函數內部的局部變量 function testCallback(callback) { let a = 1; let b = 2; if (a < b) { callback && callbac

promise、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(f

Promise和Async/Await用法整理

1.Promise 1.简介 Promise,简单来说就是一个容器,里面保存着某个未来才会结束的时间(通常是一个异步操作的结果) Promise对象的基本语法: new Promise((resolve,reject) => { //..... }); 从语法上来说,Promise是一个对象,从它可以获取异步操作的消息. 基本语法: let p = new Promise((resolve,reject) => { //... resolve('success') }); p.then(res

关于async/await、promise和setTimeout执行顺序

先来一道关于async/await.promise和setTimeout的执行顺序的题目: 1 async function async1() { 2 console.log('async1 start'); 3 await async2(); 4 console.log('asnyc1 end'); 5 } 6 async function async2() { 7 console.log('async2'); 8 } 9 console.log('script start'); 10 set

每日技术:关于promise,async,setTimeout的执行顺序

前端100问第10题 参考:https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 请写出下面代码的运行结果 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } c

Promise和setTimeout执行顺序 面试题

看到过下面这样一道题: (function test() { setTimeout(function() {console.log(4)}, 0); new Promise(function executor(resolve) { console.log(1); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(2); }).then(function() { console.log(5);

process.nextTick,Promise.then,setTimeout,setImmediate执行顺序

1. 同步代码执行顺序优先级高于异步代码执行顺序优先级: 2. new Promise(fn)中的fn是同步执行: 3. process.nextTick()>Promise.then()>setTimeout>setImmediate 出处:https://www.jb51.net/article/151174.htm 原文地址:https://www.cnblogs.com/mengff/p/10216494.html