精华内容
下载资源
问答
  • 关于async/await、promise和setTimeout执行顺序

    万次阅读 多人点赞 2019-03-22 16:19:40
    前段时间领导给我们出了一道题,关于async/await、promise和setTimeout的执行顺序,网上查了查资料,这是头条的一道笔试题,记录一下,加深理解。 题目如下: async function async1() { console.log('async1 ...

    前段时间领导给我们出了一道题,关于async/await、promise和setTimeout的执行顺序,网上查了查资料,这是头条的一道笔试题,记录一下,加深理解。

    题目如下:

    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');

    执行结果:

    script start
    async1 start
    async2
    promise1
    script end
    asnyc1 end
    promise2
    setTimeOut

    首先,我们先来了解一下基本概念:


    js EventLoop 事件循环机制:

    JavaScript的事件分两种,宏任务(macro-task)微任务(micro-task)

    • 宏任务:包括整体代码script,setTimeout,setInterval
    • 微任务:Promise.then(非new Promise),process.nextTick(node中)

    • 事件的执行顺序,是先执行宏任务,然后执行微任务,这个是基础,任务可以有同步任务和异步任务,同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。

    注意: setTimeOut并不是直接的把你的回掉函数放进上述的异步队列中去,而是在定时器的时间到了之后,把回掉函数放到执行异步队列中去。如果此时这个队列已经有很多任务了,那就排在他们的后面。这也就解释了为什么setTimeOut为什么不能精准的执行的问题了。setTimeOut执行需要满足两个条件:

    1. 主进程必须是空闲的状态,如果到时间了,主进程不空闲也不会执行你的回掉函数 
    2. 这个回掉函数需要等到插入异步队列时前面的异步函数都执行完了,才会执行 

     上面是比较官方的解释,说一下自己的理解吧:

    了解了什么是宏任务和微任务,就好理解多了,首先执行 宏任务 => 微任务的Event Queue => 宏任务的Event Queue


    promise、async/await

    1. 首先,new Promise是同步的任务,会被放到主进程中去立即执行。而.then()函数是异步任务会放到异步队列中去,那什么时候放到异步队列中去呢?当你的promise状态结束的时候,就会立即放进异步队列中去了。

    2. 带async关键字的函数会返回一个promise对象,如果里面没有await,执行起来等同于普通函数;如果没有await,async函数并没有很厉害是不是
    3. await 关键字要在 async 关键字函数的内部,await 写在外面会报错;await如同他的语意,就是在等待,等待右侧的表达式完成。此时的await会让出线程,阻塞async内后续的代码,先去执行async外的代码。等外面的同步代码执行完毕,才会执行里面的后续代码。就算await的不是promise对象,是一个同步函数,也会等这样操作

    步入正题:

     根据图片显示我们来整理一下流程:

    1、执行console.log('script start'),输出script start
    2、执行setTimeout,是一个异步动作,放入宏任务异步队列中;
    3、执行async1(),输出async1 start,继续向下执行;
    4、执行async2(),输出async2,并返回了一个promise对象,await让出了线程,把返回的promise加入了微任务异步队列,所以async1()下面的代码也要等待上面完成后继续执行;
    5、执行 new Promise,输出promise1,然后将resolve放入微任务异步队列;
    6、执行console.log('script end'),输出script end
    7、到此同步的代码就都执行完成了,然后去微任务异步队列里去获取任务
    8、接下来执行resolve(async2返回的promise返回的),输出了async1 end
    9、然后执行resolve(new Promise的),输出了promise2
    10、最后执行setTimeout,输出了settimeout


    以上为自己的见解,如错误请及时指正,谢谢!!!

    展开全文
  • 关于Promise和setTimeout执行顺序的问题,先看一道题: 写出console.log输出的值: console.log('one'); setTimeout(function(){ console.log('two'); },0); Promise.resolve().then(function(){ ...

    关于Promise和setTimeout执行顺序的问题,先看一道题:

    写出console.log输出的值:

    		console.log('one');
    		setTimeout(function(){
    			console.log('two');
    		},0);
    		Promise.resolve().then(function(){
    			console.log('three');
    		})
    		console.log('four')
    		// 以下是打印结果
    		// 'one'
    		// 'four'
    		// 'three'
    		// 'two'
    
    

    分析一下代码的执行过程:

    1. 所有的代码都是在script标签中的,这是第一个宏任务。
    2. 代码从上到下同步解析,先打印’one’出来。
    3. 接着是setTimeout,第二个宏任务
    4. 接着遇到Promise,这是第三个宏任务,排队。
    5. Promise的回调,是一个微任务,微任务序列中排队。
    6. 打印‘four’出来。
    7. 执行微任务,打印‘three’。
    8. 执行宏任务,打印’two’。
    9. 所以最后的结果是 ‘one’ ‘four’ ‘three’ ‘two’
    展开全文
  • promise和setTimeout都是异步执行的,但是执行顺序谁先谁后呢?先看两段简单的代码,比较一下同步异步: //promise和同步比较 new Promise(function (resolve, reject) { resolve(1); }).then(console.log); ...

    promise和setTimeout都是异步执行的,但是执行顺序谁先谁后呢?先看两段简单的代码,比较一下同步和异步:

    //promise和同步比较
    new Promise(function (resolve, reject) {
      resolve(1);
    }).then(console.log);
    
    console.log(2);
    
    // 2
    // 1
    
    //定时器和同步比较
    setTimeout(function() {
      console.log(1);
    }, 0);
    
    console.log(2);
    
    // 2
    // 1
    

    同步和异步比较一定是同步先执行,异步后执行,和代码的书写顺序无关。

    接下来咱们看看异步和异步之间的比较(promise和setTimeout):

    //定时器、promise、同步 三者比较
    setTimeout(function() {
      console.log(1);
    }, 0);
    
    new Promise(function (resolve, reject) {
      resolve(2);
    }).then(console.log);
    
    console.log(3);
    
    // 3
    // 2
    // 1
    

    上面代码的输出结果是321。这说明then的回调函数的执行时间,早于setTimeout(fn, 0)。因为then是本轮事件循环执行,setTimeout(fn, 0)在下一轮事件循环开始时执行。

    这是由于:
    Promise 的回调函数属于异步任务,会在同步任务之后执行。
    但是,Promise 的回调函数不是正常的异步任务,而是微任务(microtask)。它们的区别在于,正常任务追加到下一轮事件循环,微任务追加到本轮事件循环。这意味着,微任务的执行时间一定早于正常任务。

    展开全文
  • 面试题–promise和setTimeout的输出顺序 下面一段代码是在网上看到的一段关于promise和setTimeout的输出顺序的代码,下面做一下解答,有兴趣的百度自行了解js的执行机制(包括宏任务微任务,这里就不在多说): 1...

    面试题–promise和setTimeout的输出顺序

    下面一段代码是在网上看到的一段关于promise和setTimeout的输出顺序的代码,下面做一下解答,有兴趣的百度自行了解js的执行机制(包括宏任务和微任务,这里就不在多说):

    1、new promise事件只要建立,里面的代码会立即执行;
    2、promise.then()和process.nextTick()的代码会在本轮"事件循环"结束时执行;
    3、setTimeoutd(fn, 0)的代码会在下一轮"事件循环"开始时执行;
    4、最后执行setTimeout(fn,1000)的代码。

    setTimeout(function () {
    	var np =new  Promise(function (resolve,reject) {
    		console.log(1)
    		resolve()
    	})
    	np.then(_=>{
    		console.log(2)
    	})
    	console.log(3)
    },1000)
     
    var pro = new Promise((resolve, reject) => {
    	console.log(5)
    	resolve()
    }).then(_=>{
    	setTimeout(function () {
    		console.log(6)
    	},0)
    	return 7;
    }).then(n=>{
    	console.log(n)
    })
    console.log(4)
    //执行结果 5  4  7  6  1  3  2
    
    • 首先执行代码遇到setTimeout(fn, 1000)将其放到消息队列中
    • 往下执行遇到new promise()直接执行里面的代码第一个输出5,遇到promise.then后将promise.then放到本次事件循环的结束
    • 再往下执行遇到console.log(4),所以第二个输出4,本次事件循环即将结束,去取promise.then()的代码
    • 第一个promise.then()里含有setTimeout(fn, 0)应当将其放在下一轮事件循环的开始
    • 紧接着第二个promise.then()执行n就是第一个promise.then()的返回值所以第三个输出7
    • 开始第二轮事件循环,首先读取setTimeout(fn, 0),第四个输出6
    • 将消息队列中的setTimeout(fn, 1000)取出来开始第二轮,还是一样的道理,紧接着输出1,3,2
    展开全文
  • JS关于Promise和setTimeout的那些事儿 话不多说先上题: new Promise(res=>{ setTimeout(()=>{console.log(000)},0) res() }).then(res=>{setTimeout(()=>{console.log(11111)},0)}) setTimeout(()=>...
  • then和settimeout执行顺序,即setTimeout(fn, 0)在下一轮“事件循环”开始时执行,Promise.then()在本轮“事件循环”结束时执行。因此then 函数先输出,settimeout后输出
  • return new Promise(function(resolve, reject) { console.log('222') setTimeout(resolve, duration) }) } console.log('111') sleep(2000).then(() => console.log('333')) 这是一段非常常用的封装方法。...
  • promise和setTimeout执行顺序的问题

    万次阅读 2018-04-23 18:48:41
    阅读此文的前提是了解promise的基本用法特性,比如他自执行特性、状态不可逆特性等 抛出问题 且看下面代码问题 setTimeout(function(){console.log(1)},0); new Promise(fu...
  • 关于async/await、promise和setTimeout的执行顺序,当时没做对。 后来查了查是非常经典的题目。也给大家解疑答惑一下,说出自己的理解。 题目是看代码写结果。 async function async1() { console.log('async1 ...
  • 阅读此文的前提是了解浏览器event loop的机制,还有promise的基本用法特性,比如他自执行特性、状态不可逆特性等 二、问题 setTimeout(function(){console.log(1)},0); new Promise(function(resolve){ console....
  • 宏任务一般包括:整体代码script,setTimeout,setInterval。 微任务:Promise,process.nextTick先执行 **先同步再取出第一-个宏任务执行所有的相关微任务总会在下个宏任务之 前全部执行完毕 如果遇见就 先微...
  • ```console.log(1);new Promise(function (res,rej) { console.log(2); res();}).then(function () { console.log(3); Promise.resolve().then(function () { console.log(5); setTi...
  • JavaScript中Promise和setTimeout的区别

    千次阅读 2018-03-12 20:16:29
    最近在看vue源码,发现vue中的nextTick异步更新dom操作是先判断是否支持Promise,如果不支持就判断是否支持MutationObserval,如果也不支持的话,最后才是setTimeout。/** * Defer a task to execute it ...
  • 看到过下面这样一道题: (function test() { setTimeout(function() {console.log(4)}, 0); new Promise(function executor(resolve) { console.log(1); for( var i=0 ; i<10000 ; i++ ) { ...
  • async function async1(){ console.log('async1 start')//2 await async2() //await后面都作为回调内容 微任务1=>放在微任务队列 console.log('async1 end') } async function async2()...setTimeout(() => {
  • 前言 promise为es6引进的语言标准,为异步...阅读此文的前提是了解浏览器event loop的机制,还有promise的基本用法特性,比如他自执行特性、状态不可逆特性等 抛出问题 且看下面代码问题 setTimeout(function(...
  • setTimeout(function() { console.log('setTimeout'); }) new Promise(function(resolve) { console.log('promise'); }).then(function() { console.log('then'); }) console.log('console'); 整段代码做为宏.....
  • ①macro-task(宏任务):包括整体代码script,setTimeout,setInterval ②micro-task(微任务):Promise,process.nextTick 宏任务微任务的执行流程: new Promise(function(resolve){ console.log(2) for( var i...
  • 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容顺序。因为javascript是一门单线程语言,所以我们可以得出结论: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,502
精华内容 21,000
关键字:

promise和settimeout