k8w.io
Promise.then与setTimeout的执行顺序
2017-11-20作者:k8w

跟setTimeout一样,Promise.then也会延迟执行。
当它们一起出现时,执行顺序又是怎样的呢?

结论

有关执行顺序的结论

  1. 同一Tick下,Promise.then永远早于setTimeout/setInterval
  2. 同一Tick同一Queue下,执行顺序等于入队列顺序,与其它参数无关
    1. 在同一Tick命中的setTimeout,执行顺序值只等于其set的顺序,而与set的延迟时间无关

EventLoop过程

  1. 全局只有一个EventLoop,Loop中有多个TaskQueue
  2. 每次EventLoop,先遍历PromiseQueue,再遍历setTimeoutQueue
  3. setTimeout和setInterval是同一个Queue
  4. 遍历Queue:顺序遍历,满足条件则执行并Pop

验证过程

Promise.then和setTimeout的顺序

setTimeout(()=>{
  console.log(1)
}, 0)

new Promise(rs=>{rs()}).then(()=>{
  console.log('p1')
})

setTimeout(()=>{
  console.log(2)
}, 0)

new Promise(rs=>{rs()}).then(()=>{
  console.log('p2')
})

setTimeout(()=>{
  console.log(3)
}, 0)

new Promise(rs=>{rs()}).then(()=>{
  console.log('p3')
})

new Promise(rs=>{rs()}).then(()=>{
  console.log('p4')
})

在Chrome及Node8.2.1中的运行结果都是:

p1
p2
p3
p4
1
2
3
## setTimeout的顺序等于时间顺序?
setTimeout(()=>{
  console.log(1)
}, 0)

setTimeout(()=>{
  console.log(2)
}, 1)

setTimeout(()=>{
  console.log(3)
}, 0)

在Chrome下结果为

1
2
3

setTimeout(()=>{
  console.log(1)
}, 0)

setTimeout(()=>{
  console.log(2)
}, 2)

setTimeout(()=>{
  console.log(3)
}, 0)

结果为

1
3
2
## Promise.then执行顺序
new Promise(rs=>{
  setTimeout(()=>{
    rs();
  }, 1)
}).then(()=>{
  console.log('p1')
})

new Promise(rs=>{
  setTimeout(()=>{
    rs();
  }, 0)
}
).then(()=>{
  console.log('p2')
})

运行结果:

p1
p2

new Promise(rs=>{
  setTimeout(()=>{
    rs();
  }, 2)
}).then(()=>{
  console.log('p1')
})

new Promise(rs=>{
  setTimeout(()=>{
    rs();
  }, 0)
}
).then(()=>{
  console.log('p2')
})

运行结果

p2
p1
(正文完)
留言(0条)
发表新留言
您的大名:
必填
电子邮箱:
不公开,仅用于向你发送回复