您的位置是:网站首页>Javascript编程Javascript编程

深入浅析 Promise 比 setTimeout() 快的原因

少儿编程网2021-04-06 17:31:43Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介为什么Promise比setTimeout()快?下面本篇文章就来给大家分析一下原因。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。相关推荐:《javascript视频教程》1.实验我们来做个实验。哪个执行得更快:立即解决的Promise还是立即setTimeout(也就是0毫秒的

为什么 Promise 比setTimeout() 快?下面本篇文章就来给大家分析一下原因。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。iTv少儿编程网-https://www.pxcodes.com

iTv少儿编程网-https://www.pxcodes.com

相关推荐:《javascript视频教程》iTv少儿编程网-https://www.pxcodes.com

1.实验

我们来做个实验。哪个执行得更快:立即解决的 Promise 还是立即setTimeout(也就是0毫秒的setTimeout)?iTv少儿编程网-https://www.pxcodes.com

Promise.resolve(1).then(function resolve() {
  console.log('Resolved!');
});

setTimeout(function timeout() {
  console.log('Timed out!');
}, 0);

// 'Resolved!'
// 'Timed out!'

promise.resolve(1)是一个静态函数,它返回一个立即解析的promisesetTimeout(callback, 0)0毫秒的延迟执行回调函数。iTv少儿编程网-https://www.pxcodes.com

我们可以看到先打印'Resolved!',再打印Timeout completed!,立即解决的 promise 比立即setTimeout更快。iTv少儿编程网-https://www.pxcodes.com

是因为Promise.resolve(true).then(...)setTimeout(..., 0)之前被调用了,所以 Promise 过程会更快吗? 公平的问题。iTv少儿编程网-https://www.pxcodes.com

所以,我们稍微更改一下实验条件,然后先调用setTimeout(..., 0)iTv少儿编程网-https://www.pxcodes.com

setTimeout(function timeout() {
  console.log('Timed out!');
}, 0);

Promise.resolve(1).then(function resolve() {
  console.log('Resolved!');
});

// 'Resolved!'
// 'Timed out!'

setTimeout(..., 0)Promise.resolve(true).then(...)之前被调用。但,还是先打印Resolved!在打印'Timed out!'iTv少儿编程网-https://www.pxcodes.com

这是为啥呢?iTv少儿编程网-https://www.pxcodes.com

2.事件循环

与异步 JS 相关的问题可以通过研究事件循环来回答。我们回顾一下异步 JS 工作方式的主要组成部分。iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lt9zVHTf-1611275604640)(/img/bVcMQaI)]iTv少儿编程网-https://www.pxcodes.com

调用堆栈是一个LIFO(后进先出)结构,它存储在代码执行期间创建的执行上下文。简单地说,调用堆栈执行这些函数。iTv少儿编程网-https://www.pxcodes.com

Web api是异步操作(fetch 请求、promise、计时器)及其回调等待完成的地方。iTv少儿编程网-https://www.pxcodes.com

**task queue (任务队列)是一个FIFO(先进先出)**结构,它保存准备执行的异步操作的回调。例如,超时的setTimeout()的回调函数或准备执行的单击按钮事件处理程序都在任务队列中排队。iTv少儿编程网-https://www.pxcodes.com

**job queue (作业队列)**是一个FIFO(先入先出)结构,它保存准备执行的promise 的回调。例如,已完成的承诺的resolvereject回调被排在作业队列中。iTv少儿编程网-https://www.pxcodes.com

**后,事件循环永久监听调用堆栈是否为空。如果调用堆栈为空,则事件循环查看作业队列或任务队列,并将准备执行的任何回调分派到调用堆栈中。iTv少儿编程网-https://www.pxcodes.com

3.作业队列与任务队列

我们从事件循环的角度来看这个实验,我将对代码执行进行一步一步的分析。iTv少儿编程网-https://www.pxcodes.com

A)调用堆栈执行setTimeout(..., 0)并计划一个计时器, timeout()回调存储在Web API中:iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLk0AUa5-1611275604642)(/img/bVcMQdg)]iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zr7usYTK-1611275604643)(/img/bVcMQc9)]iTv少儿编程网-https://www.pxcodes.com

B)调用堆栈执行 Promise.resolve(true).then(resolve)并安排一个 promise 解决方案。 resolved()回调存储在Web API中:iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JTwSnLYS-1611275604646)(/img/bVcMQdh)]iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k5cRhqzN-1611275604648)(/img/bVcMQdi)]iTv少儿编程网-https://www.pxcodes.com

C)promise 立即被解析,同时计时器也立即执行。这样,定时器回调timeout()进入任务队列,promise回调resolve()进入作业队列iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMfLB2YJ-1611275604649)(/img/bVcMQdS)]iTv少儿编程网-https://www.pxcodes.com

D)现在是有趣的部分:作业队列(微任务)优先级高于任务队列(宏任务)。 事件循环从作业队列中取出promise回调resolve()并将其放入调用堆栈中。 然后,调用堆栈执行promise回调resolve()iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnqfgoo1-1611275604650)(/img/bVcMQey)] iTv少儿编程网-https://www.pxcodes.com

E)**后,事件循环将计时器回调timeout()从任务队列中出队到调用堆栈中。 然后,调用堆栈执行计时器回调timeout()iTv少儿编程网-https://www.pxcodes.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fj54WaI0-1611275604650)(/img/bVcMQeB)]iTv少儿编程网-https://www.pxcodes.com

调用堆栈为空,已完成脚本的执行。iTv少儿编程网-https://www.pxcodes.com

总结

为什么立即解决的 promise 比立即执行定时器处理得更快?iTv少儿编程网-https://www.pxcodes.com

由于事件循环优先级的存在,因此与任务队列(存储超时的setTimeout()回调)相比,作业队列(用于存储已实现的Promise回调)的优先级更高。iTv少儿编程网-https://www.pxcodes.com

原文地址:https://dmitripavlutin.com/javascript-promises-settimeout/iTv少儿编程网-https://www.pxcodes.com

作者:Milos ProticiTv少儿编程网-https://www.pxcodes.com

译文地址:https://segmentfault.com/a/1190000038769853
iTv少儿编程网-https://www.pxcodes.com

更多计算机编程相关知识,请访问:编程视频!!

以上就是深入浅析 Promise 比 setTimeout() 快的原因的详细内容,更多请关注少儿编程网其它相关文章!iTv少儿编程网-https://www.pxcodes.com

来源:php中文网iTv少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

深入浅析 Promise 比 setTimeout() 快的原因

      匿名评论
    • 评论
    人参与,条评论
    深入浅析 Promise 比 setTimeout() 快的原因

微信公众号

免费视频教程

先知道