如何优雅地使用 async/await 退出不确定时间的回调函数?

如何优雅地使用 async/await 退出不确定时间的回调函数?

async await 中退出不确定时间的回调函数

在使用 async await 时,如果需要在不确定时间的回调函数中退出,可以通过 promise.withresolvers() 接口实现。

修改代码

将 b 函数修改为:

const b = async (): Promise => {  const { promise, resolve } = Promise.withResolvers();  const callback = (mutations: MutationRecord[]) => {    resolve();  };  const observer = new MutationObserver(callback);  observer.observe(buttonEl, {    attributes: true,  });  await p();  buttonEl.click();  // 下面这句也可以用 return promise,取决于你的后续逻辑  await promise;};

原理

promise.withresolvers() 返回一个 promise 和解决器对象。将其应用于此场景:

在观察器回调中调用 resolve 将解决 promise。await promise 将等待 promise 解决,从而等待观察器回调被触发。

考虑因素

promise.withresolvers() 目前处于 stage-4 阶段,存在兼容性问题。使用 typescript 需要确保配置 lib: “esnext”。

以上就是如何优雅地使用 async/await 退出不确定时间的回调函数?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:12:13
下一篇 2025年12月19日 20:12:24

相关推荐

  • Does Your JavaScript Code Sucks?

    javascript 是一种让网站正常运行的语言,由 brendan eich 于 1995 年在短短 10 天内创建。尽管许多人批评其奇怪的功能,但它很快就流行起来。随着时间的推移,javascript 已经发展成为一种强大且灵活的语言,对于现代 web 开发至关重要。然而,许多程序员仍然编写缓慢…

    2025年12月19日
    000
  • Async/Await中如何优雅地退出不确定时间的回调函数?

    如何使用 async await 退出不确定时间的回调函数? 在使用 async await 编写异步代码时,有时会出现需要从不确定时间的回调函数中退出的情况。通常情况下,常规的 promise 写法可以使用 then() 链式调用来退出,但 async await 写法没有直接的退出方式。 例如,…

    2025年12月19日
    000
  • 如何在 Git 中删除分支:完整指南

    Git 是现代软件开发中用于版本控制的重要工具。管理分支是使用 Git 的关键部分,因为分支允许团队有效协作并处理不同的功能或错误修复,而不会干扰主代码库。一旦分支达到其目的,最好将其删除,以保持存储库的干净和组织。在本指南中,我们将介绍如何删除 Git 分支,涵盖本地和远程分支,并解释每个步骤的重…

    2025年12月19日
    000
  • A Comprehensive Guide to QA Testing: Ensuring Software Quality

    质量保证 (QA) 测试是软件开发生命周期的关键部分,确保产品满足功能、可靠性和用户满意度的最高标准。随着技术进步的快速发展和用户期望的不断增长,QA 测试对于提供强大且高性能的软件应用程序已变得不可或缺。本文详细探讨了 QA 测试,涵盖其重要性、类型、策略、工具和最佳实践。 什么是 QA 测试?Q…

    2025年12月19日
    000
  • Web 开发的演变:从静态 HTML 到动态 Web 应用程序

    自互联网诞生之初以来,Web 开发已经取得了长足的进步。最初简单的静态 HTML 页面已转变为由现代技术支持的动态、交互式和身临其境的体验。这一旅程不仅反映了技术的进步,还反映了我们与网络交互方式的转变。 静态网页时代网络的早期是由 20 世纪 90 年代引入的静态 HTML 页面定义的。这些页面是…

    2025年12月19日
    000
  • Visual Studio Code初始化JS/TS语言功能卡住怎么办?

    Visual Studio Code 初始化 JS/TS 语言功能遇到困难 在使用 Visual Studio Code 编辑器处理 JavaScript/TypeScript(JS/TS)项目时,部分用户遇到了“正在初始化 JS/TS 语言功能”的提示,该提示会影响某些功能的使用,例如查找文件引用…

    2025年12月19日
    000
  • FileReader实例化:为何要先创建对象再进行文件读取?

    读取文件的 io 操作为何要先实例化 filereader? 当使用 html 元素 filereader 实例,然后通过其方法来处理文件。那么问题来了,为什么不能直接将文件传递给 filereader 构造函数,但为什么要先创建一个实例,然后再做一些事情呢? 创建 filereader 实例的原因…

    2025年12月19日
    000
  • 精通网络和移动设备的全栈软件工程师(联合创始人潜力)

    英国公司注:这纯粹是为了股权,因为这还处于早期阶段,没有收入或投资。这是您参与大事的机会!! 我正在开发一家令人兴奋的新健身科技初创公司,专注于为健身房及其会员提供独特的价值。我们的平台旨在彻底改变健身体验,在健身房与其用户之间建立更牢固的联系。我已经用我的编码知识构建了该平台的基础,但现在我正在寻…

    2025年12月19日
    000
  • 通过示例快速学习 useActionState (Nextjs

    使用表单时,useactionstate 挂钩简化了捕获表单值并将其作为 formdata 传递到服务器操作的过程。 useactionstate 还通过使用服务器操作返回的值自动更新状态变量来管理状态。这对于渲染输入字段验证错误特别有帮助,如下面使用 zod 的示例所示。 form.tsx: “u…

    2025年12月19日
    000
  • 使用 React Native 和 Hugging Face API 构建交互式儿童故事生成器

    在这篇文章中,我们将逐步构建一个 react native 应用程序,该应用程序使用 hugging face 强大的 ai 模型根据提示和年龄范围生成儿童故事。该应用程序允许用户输入提示,选择年龄范围,然后查看自定义故事以及总结故事的卡通图像。 特征 交互式故事生成:用户输入指导人工智能创建引人入…

    2025年12月19日
    000
  • 将用户数据存储在 localStorage 中安全吗?

    开发 web 应用程序时,经常需要在浏览器中存储用户数据以改善体验或保持状态持久性。但为此使用 localstorage 安全吗?让我们探讨风险、最佳实践和安全替代方案。 什么是本地存储?localstorage 是一个浏览器 api,允许您在客户端简单且持久地存储数据。与 sessionstora…

    2025年12月19日
    000
  • ElementUI 组件排序后删除按钮删除元素异常:为什么点击删除按钮会随机删除元素?

    ElementUI 组件排序后删除按钮删除元素异常:排查与解决 在使用 ElementUI 组件进行排序操作时,用户发现点击删除按钮会随机删除元素,尽管打印的传入下标是正确的。需要排查并解决这个问题。 可能的导致因素包括: index 变化:在排序后,组件的索引值会实时变化。因此,在点击删除按钮时,…

    2025年12月19日
    000
  • 具有默认响应式导航栏的 React/Tailwind 模板

    我只是对排除 App.test.js 和所有那些我不会在 React 项目中使用的默认文件感到恼火,而且除了来自 Tailwind UI 网站的免费版本的导航栏之外,我从未找到过好的导航栏,这不是我见过的最好的导航栏。考虑到这一点,我从头开始为任何 React 项目创建了一个模板。我删除了所有不必要…

    2025年12月19日
    000
  • JavaScript 生成器:通过暂停功能增强您的代码!

    javascript 生成器非常酷。它们就像常规函数,但具有超能力。我最近经常使用它们,我不得不说,它们改变了我对代码中控制流的思考方式。 让我们从基础开始。生成器是一个可以暂停和恢复的函数。它使用 function* 语法和yield 关键字。这是一个简单的例子: function* countt…

    2025年12月19日
    000
  • 你需要像专业人士一样阅读科技文章

    在快节奏的技术世界中,并非您阅读的所有内容都是准确或公正的。并非您读到的所有内容都是由人类编写的! 细节可能存在微妙的错误,或者文章可能故意误导。让我们来看看一些可以帮助您阅读科技文章或任何媒体内容的技能。 1. 培养健康的怀疑态度 培养健康的怀疑态度至关重要。质疑大胆的主张,寻找支持证据,不要只看…

    2025年12月19日
    000
  • 修改原型prototype:便捷与风险并存,如何平衡?

    修改原型prototype的潜在风险 修改对象原型prototype的做法虽然便捷,但也存在潜在的风险。 回想一下 JavaScript 中字符串和数组的包含方法为何分别称为 includes() 而不是 contains() 以及 groupBy 作为静态方法的设计。原因在于,历史上曾有库(如 M…

    2025年12月19日
    000
  • 修改原型prototype:方便之下的兼容性陷阱?

    修改原型prototype的风险:向不兼容兼容性的深渊迈进 修改原型prototype是一种看似方便却暗藏隐患的JS黑魔法。当在String或Array等全系统性的内置对象中添加自定义方法时,您可能会觉得省去了在各个组件中引入方法的麻烦。 然而,这种偷懒的做法代价高昂。经验丰富的开发者早已深知其中潜…

    2025年12月19日
    000
  • Vite 项目打包后非根路径刷新出现 “Failed to load module script” 错误:如何解决?

    解题:Vite项目打包后在非根路径刷新页面出现的 Failed to load module script 错误 在 Vite 项目中,打包后部署到 Nginx 服务器时,在非根路径刷新页面可能会遇到 “Failed to load module script” 错误。 该错…

    2025年12月19日
    000
  • 如何优化ExcelJs库导出Excel时的卡顿问题?

    exceljs库导出excel卡顿的优化策略 为了提高exceljs导出excel表的效率,有以下几个优化策略: 批量操作: 避免对单个单元格进行逐个操作,转而使用批量处理,提高效率。使用模板: 事先准备一个模板文件,其中已设置好保护和解锁的列,然后将数据写入模板中。优化代码结构: 调整代码结构,使…

    2025年12月19日
    000
  • 什么是 stub types definition 以及如何在 TypeScript 中使用它?

    什么是 stub types definition? 在 typescript 中,stub types definition 是一个定义文件(通常为 .d.ts 文件),它提供了一个模块或库的“存根”(stub)类型信息。这些类型信息告诉 typescript 编译器该模块或库的函数、变量和类型有…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信