Typescript 等待几秒不阻塞|极客教程

Typescript 等待几秒不阻塞

在前端开发中，我们经常会遇到需要等待一段时间后再继续执行下一步操作的场景。而在 TypeScript 中，我们一般会使用异步操作来处理这类需求，以避免阻塞主线程。在本文中，我将详细介绍如何在 TypeScript 中等待一定时间而不阻塞主线程的方法。

使用 Promise 和 setTimeout

在 TypeScript 中，我们通常会使用 Promise 结合 setTimeout 来实现等待一定时间的功能。我们可以通过创建一个 Promise 对象，并在其中使用 setTimeout 来模拟等待的过程。下面是一个示例代码：

function wait(timeout: number): Promise<void> {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });
}

async function main() {
  console.log('Start');
  await wait(3000); // 等待3秒
  console.log('End');
}

main();

在上面的示例中，我们首先定义了一个 wait 函数，用于创建一个 Promise 对象，然后使用 setTimeout 来延迟 resolve 的执行时间。接着我们通过 async/await 的方式来等待这个 Promise 对象的完成，从而达到等待一定时间的目的。

当我们运行上面的代码时，我们会看到输出如下：

Start
(等待3秒)
End

可以看到，程序在等待3秒后才会输出 “End”，而在等待的过程中并没有阻塞主线程。

使用 RxJS 的 timer 操作符

除了使用 Promise 和 setTimeout 外，我们还可以使用 RxJS 中的 timer 操作符来实现等待一定时间不阻塞主线程的效果。RxJS 是一个函数式编程风格的 JavaScript 库，提供了丰富的操作符来处理异步数据流的处理。

下面是使用 RxJS 的 timer 操作符来实现等待一定时间的示例代码：

import { timer } from 'rxjs';

async function main() {
  console.log('Start');
  await timer(3000).toPromise(); // 等待3秒
  console.log('End');
}

main();

在上面的示例中，我们引入了 RxJS 库，并使用其提供的 timer 操作符来创建一个 Observable 对象，然后通过 toPromise() 方法将其转换为 Promise 对象，从而实现了等待一定时间的效果。

当我们运行上面的代码时，输出与前面的示例相似：