JavaScript Fundamentals

JavaScript异步暂停:Promise与Async/Await

Spread the love

JavaScript是单线程的,缺少其他语言中sleep()函数的直接等效项。模拟暂停需要使用异步技术。本文探讨两种方法:一种使用setTimeout和Promise,另一种利用更简洁的async/await语法。

目录

使用Promise实现Sleep函数

最直接的方法是在Promise中使用setTimeout。这避免了阻塞主线程,确保您的应用程序保持响应。


function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

sleep(2000)
  .then(() => console.log("休眠了2秒!"))
  .catch(error => console.error("发生错误:", error));

console.log("这将在sleep函数完成之前执行。");

说明:

  • sleep(ms):此函数以毫秒 (ms) 为参数,接收休眠持续时间。
  • new Promise(resolve => setTimeout(resolve, ms)):创建一个Promise。setTimeout计划在ms毫秒后调用resolve函数。这将解析Promise,表示休眠结束。
  • .then():这处理已解析的Promise,在休眠完成后执行其中的代码。
  • .catch():此可选部分处理超时期间可能发生的任何错误。

此方法高效且避免了阻塞主线程的陷阱。但是,使用.then()对某些程序员来说可能不太直观。

使用Async/Await实现Sleep函数

Async/await提供了一种更易读且可以说是更优雅的解决方案。它建立在基于Promise的方法之上,但简化了异步流程。


async function sleep(ms) {
  await new Promise(resolve => setTimeout(resolve, ms));
}

async function myFunction() {
  console.log("开始...");
  await sleep(2000);
  console.log("休眠了2秒!");
}

myFunction();
console.log("这将在sleep函数完成之前执行。");

说明:

  • async function sleep(ms)async关键字表示异步函数。
  • await new Promise(...)await关键字暂停sleep的执行,直到Promise解析。此暂停不会阻塞主线程。
  • async function myFunction():此函数演示如何在更大的异步操作中使用sleep

async/await语法使异步代码看起来像同步代码,提高了可读性和可维护性。这通常是其清晰度和易用性的首选方法。

两种方法都达到了相同的结果,但async/await为在JavaScript中处理异步操作提供了更现代和更易读的语法。避免在生产代码中使用忙等待循环;它们会冻结您的应用程序。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注