Promise 中的 then 回调执行顺序如何确定?

promise 中的 then 回调执行顺序如何确定?

promise输出顺序面试题

一道刚从某网站看到的面试题,询问以下代码打印的输出顺序:

promise.resolve().then(() => {  console.log('start')  return promise.resolve('end')}).then(res => {  console.log(res)})promise.resolve().then(() => {  console.log(1)}).then(() => {  console.log(2)}).then(() => {  console.log(3)}).then(() => {  console.log(4)}).then(() => {  console.log(5)}).then(() => {  console.log(6)})

经过分析,可以得到输出顺序为:

start 1 2 3 end 4 5 6

为什么end会在3、4之间?

这是因为 promise.resolve().then() 中 的 return 操作返回了一个新的 promise,并将其加入微任务队列。当第一个 promise 完成后,微任务队列会依次执行,此时第二个 promise 尚未完成,因此会输出 3。之后,第二个 promise 完成,end 输出。

删除return之后

将其改为以下代码:

promise.resolve().then(() => {  console.log('start')  promise.resolve('end').then(res => {    console.log(res)  })})

输出顺序变为:

start 1 end 2 3 4 5 6

这是因为 return 会消耗额外的时间,导致第二组 then 的回调函数被推迟执行。

多个 promise 顺序问题

对于以下代码:

promise.resolve().then(() => {  console.log(1)}).then(() => {  console.log(2)}).then(() => {  console.log(3)}).then(() => {  console.log(4)}).then(() => {  console.log(5)})promise.resolve().then(() => {  console.log(6)}).then(() => {  console.log(7)}).then(() => {  console.log(8)}).then(() => {  console.log(9)}).then(() => {  console.log(10)})

输出顺序始终为:

1 6 2 7 3 8 4 9 5 10

这是因为在抛开外部因素的情况下,promise 内部回调函数的执行顺序与其进入微任务队列的顺序一致。

以上就是Promise 中的 then 回调执行顺序如何确定?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1497446.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 19:31:56
下一篇 2025年12月19日 19:32:09

相关推荐

  • Promise 构造函数中的异常为何不会阻止后续脚本执行?

    Promise 构造函数内部的同步执行器(executor)中抛出的异常会被 Promise 机制捕获并处理,将 Promise 的状态设置为 rejected,但不会立即中断后续脚本的执行。这是因为 Promise 内部已经对异常进行了处理,避免了程序崩溃,允许后续代码继续运行。本文将深入探讨这一…

    2025年12月21日
    000
  • Promise 构造函数中的异常为何不会阻止脚本的其余部分执行?

    Promise 构造函数中的同步执行器(executor)内部发生的异常会被 Promise 机制捕获并处理,将 Promise 的状态置为 rejected,但不会立即中断后续代码的执行。这是因为 Promise 内部对 executor 的调用进行了异常处理,即使 executor 抛出错误,P…

    2025年12月21日
    000
  • 理解浏览器音频播放通知:JavaScript无法隐藏的原因

    本文深入探讨了在javascript中播放音频时,浏览器标签页上出现的播放通知图标(如音乐音符)。明确指出,这些通知是浏览器原生功能,旨在提升用户体验,帮助用户识别正在播放音频的标签页,因此无法通过javascript代码进行隐藏或控制。文章将解释其设计原理及对开发者的意义。 在现代Web开发中,通…

    2025年12月21日
    000
  • 如何在Expo应用中获取设备标识符(非IMEI)

    本文探讨了在Expo React Native应用中获取设备IMEI号的可行性。由于隐私和安全限制,Expo框架及其底层操作系统均不直接提供对IMEI号的访问。文章将解释为何无法获取IMEI,并提供替代方案,如使用Expo的安装ID或生成应用本地的唯一标识符,以满足设备识别需求,同时遵守平台规范。 …

    2025年12月21日
    000
  • Redux Reducer 状态在浏览器中的持久化指南

    本教程旨在指导开发者如何在 redux 应用程序中实现 reducer 状态的持久化,特别针对需要跨页面重新加载保持一致的 ui 配置状态。文章将详细介绍两种主要方法:手动利用浏览器 `localstorage` 进行状态的加载与保存,以及推荐使用 `redux-persist` 等第三方库来简化和…

    2025年12月21日
    000
  • JavaScript拖放API深度解析:安全地在Drop事件中验证文件类型

    本文深入探讨了javascript拖放api中文件类型验证的正确方法。许多开发者在`dragenter`或`dragover`事件中尝试通过`datatransfer.items`获取文件类型进行实时校验,但这种方法因安全限制而不可行。文章阐明了`datatransfer.files`属性仅在`dr…

    2025年12月21日
    000
  • JavaScript音频播放与浏览器通知控制解析

    本文详细阐述了在javascript中使用`audio`对象播放音频的基本方法,并深入探讨了浏览器在音频播放时显示通知图标的机制。我们将解释为何这些通知由浏览器本身控制,开发者无法直接隐藏,并分析其背后的用户体验设计理念,旨在帮助开发者更好地理解和适应浏览器对多媒体播放的管理策略。 JavaScri…

    2025年12月21日
    000
  • JavaScript 动画优化:requestAnimationFrame 替代 setInterval

    rAF比setInterval更优因其与屏幕刷新率同步,避免掉帧;2. 页面不可见时自动暂停,节省资源;3. 浏览器控制帧率对齐,减少卡顿;4. 提供高精度时间戳,提升动画精度。 在实现网页动画时,使用 setInterval 虽然简单直接,但存在性能问题和帧率不稳定的缺陷。现代 Web 开发推荐使…

    2025年12月21日
    000
  • Svelte中数据导入的最佳实践:区分组件与纯数据模块

    在svelte开发中,初学者常遇到的一个误区是将svelte组件文件(`.svelte`)误用于导出纯数据,导致意外地导入了组件实例而非数据本身。本文将详细解析这一问题,阐明svelte组件与普通javascript模块的导入机制差异,并提供正确导入数据的最佳实践,确保开发者能够高效、清晰地管理项目…

    2025年12月21日
    000
  • 在JavaScript中高效查找HTML表格中特定类的单元格

    本文旨在解决在JavaScript中查找HTML表格内具有特定CSS类的单元格时常见的误区,特别是当循环遍历行时。我们将探讨为什么直接使用document.querySelector会导致错误结果,并提供两种高效且正确的解决方案:通过在每行内部进行局部查询,以及直接选择所有匹配的单元格。 在Web开…

    2025年12月21日
    000
  • React列表渲染指南:优化key属性与高效调试策略

    本文深入探讨react列表元素不渲染的常见原因与解决方案。重点剖析`key`属性在列表渲染中的核心作用、如何正确选择和使用`key`以确保性能与稳定性。同时,揭示`console.log`在调试异步数据时的潜在误导性,并提供有效的数据验证及调试策略,帮助开发者构建健壮、高效的react列表组件。 在…

    2025年12月21日
    000
  • 深入解析JavaScript中bind(null)与this指向全局对象的机制

    本文深入探讨了javascript中`bind(null)`或`bind(undefined)`为何在非严格模式下仍会导致`this`指向全局对象(如浏览器环境中的`window`对象)的现象。我们将通过代码示例揭示这一行为,并依据ecmascript规范详细解释其背后的`this`值强制转换规则。…

    2025年12月21日
    000
  • 利用正则表达式匹配重叠及多模式字符串的进阶技巧

    本文将深入探讨如何使用单个正则表达式动态匹配句子中的多个模式,包括完整的句子以及其中的子词或短语,即使这些模式存在重叠。我们将重点介绍如何结合使用零宽先行断言(lookahead)和捕获组来解决传统正则无法同时捕获重叠匹配的问题,并提供详细的代码示例及注意事项,帮助开发者构建高效灵活的字符串匹配逻辑…

    2025年12月21日
    000
  • 正确使用Promise.all()解决React中异步数据收集问题

    本文深入探讨了在react应用中从firestore等服务异步获取嵌套数据时遇到的常见问题:当尝试使用`foreach`循环收集异步操作的结果时,可能会因为异步回调未被等待而导致返回空数组或未定义的数据。文章详细阐述了如何通过结合使用`array.prototype.map()`生成promise数…

    2025年12月21日
    000
  • JavaScript闭包作用域链的编译时与运行时分析

    闭包是函数与其词法环境的组合,编译时通过[[Environment]]确定作用域结构,运行时构建作用域链实现变量访问。 JavaScript中的闭包、作用域链、编译时与运行时行为是理解函数执行机制的核心。很多人困惑于“为什么内层函数能访问外层变量”,其实这背后涉及JavaScript引擎在编译和执行…

    2025年12月21日
    000
  • 深入理解JavaScript for 循环中 let 声明与作用域

    本文深入探讨javascript `for` 循环初始化块中使用 `let` 声明变量时,结合闭包可能产生的意外行为。通过分析mdn示例,我们揭示了 `for` 循环在不同阶段创建的多个作用域:一个初始作用域和多个迭代作用域。关键在于,初始化块中定义的函数会捕获初始作用域的变量,而非每次迭代生成的新…

    2025年12月21日
    000
  • JavaScript for 循环中 let 声明与闭包的复杂作用域解析

    本文深入探讨了 javascript `for` 循环初始化块中使用 `let` 声明变量并结合闭包时产生的复杂作用域行为。通过一个具体的 mdn 示例,我们将剖析循环前初始作用域与每次迭代创建的独立作用域之间的区别,解释为何闭包函数会捕获初始 `i` 变量,而循环体内部访问的是每次迭代的新 `i`…

    2025年12月21日
    000
  • React组件测试:解决onCancel回调未触发导致的测试失败

    本文深入探讨了一个常见的react组件测试失败案例:当组件的oncancel回调属性被定义但未在内部逻辑中实际调用时,测试会报告tohavebeencalled失败。通过分析组件代码和测试用例,我们揭示了问题的根本原因,并提供了明确的解决方案,即在组件的handlecancel方法中显式调用onca…

    2025年12月21日
    000
  • React组件事件处理与测试:解决onCancel测试失败的常见陷阱

    本文深入探讨了react组件测试中一个常见问题:当一个回调prop(如`oncancel`)被定义但未在组件内部实际调用时,其对应的测试将失败。文章通过一个具体的`chooselanguagemodal`组件案例,详细分析了问题原因,并提供了修正组件代码以确保回调正确执行的解决方案,旨在帮助开发者编…

    2025年12月21日
    000
  • JavaScript设计模式之发布订阅模式_javascript技巧

    发布订阅模式通过事件通道实现对象间松耦合通信,核心是发布者不直接通知订阅者,而是由事件中心统一调度。该模式适用于跨组件通信、状态管理简化及异步任务协调等场景,可提升代码可维护性与扩展性。使用时需注意事件命名规范、及时取消订阅以避免内存泄漏,并可借助once方法或成熟库如mitt优化实现。 发布订阅模…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信