promise和定时器的执行流程,宏任务与微任务,同步与异步

怼怼
  • 37

直接看代码,这个执行顺序不太能理解

function makeIter(arr) {
    let index = 0
    let delay = 3000
    return {
        next() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(arr[index++])
                }, delay -= 1000)
            })
        }
    }
}
let iter = makeIter([1, 2])
iter.next().then(val => console.log(val))
iter.next().then(val => console.log(val))
iter.next().then(val => console.log(val))

image.png
执行的结果是:无时延打印1 ,延迟1000ms打印2 ,再延迟1000ms打印undefined
我感觉结果是正好相反的或者是延迟2000ms统一打印
原因

  • 这里每个iter.next()都返回了一个Promise
  • 触发fulfilled状态的时间递减
  • 对于第一个then,要么是最后执行,要么延迟2000ms再执行
  • 为什么会是立即执行,而后面分别延迟再执行呢
这是定时器机制的问题么
我本来认为定时器有点像Promise.race那样,大家一起跑,先到了就先执行
现在感觉这设置的时间更像是队列开门的时间,排好队后按定时器反馈的时间去让队首上主线程
还是我对这任务队列的理解有问题,不管是宏任务还是微任务

希望大佬能一步一步的讲解一下这个流程,打了很多断点,看着每一行的执行往哪跳还是有点懵

回复
阅读 350
1 个回答

这三个行输出相当于利用promise加了三个宏任务settimeout,延时分别是2000,1000,0.当宏任务执行的时候,这三个then就已经执行完毕了。三个宏任务就按照顺序执行。

你第一个立即打印的那个1,其实是第三行iter.next().then(val => console.log(val))输出的,因为延时为0,都是宏任务。

第二次延时1000输出2
然后再延时1000输出undefined

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏