实现一个 sleep 函数

Question

在 JavaScript 中实现一个 sleep 函数，可以利用 Promise 和 setTimeout 。 sleep 函数通常用于让代码暂停一段时间。以下是如何实现一个 sleep 函数：

1. 基本实现

这个实现使用 Promise 和 setTimeout ，使得可以在异步函数中进行“睡眠”操作。

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

// 使用示例
async function example() {
  console.log('Start');
  await sleep(2000); // 等待 2 秒
  console.log('End');
}

example();

2. 解释

• sleep 函数 ：接收一个参数 ms ，表示要等待的时间（以毫秒为单位）。返回一个 Promise 对象，在 Promise 内部，使用 setTimeout 实现等待。 setTimeout 在指定时间后调用 resolve ，从而使 Promise 状态变为已解决（fulfilled）。
• example 函数 ：一个示例函数，演示如何使用 await 等待 sleep 函数的完成。 await 使得代码在 sleep 函数返回之前暂停执行。

3. 更复杂的用例（添加取消功能）

有时你可能希望能在 sleep 操作中添加取消的功能。以下是一个更复杂的示例，演示如何实现可取消的 sleep 函数。

class CancelableSleep {
  constructor(ms) {
    this.ms = ms;
    this.cancelled = false;
  }

  sleep() {
    return new Promise((resolve, reject) => {
      const timeoutId = setTimeout(() => {
        if (!this.cancelled) {
          resolve();
        }
      }, this.ms);

      // 取消功能
      this.cancel = () => {
        this.cancelled = true;
        clearTimeout(timeoutId);
        reject(new Error('Sleep canceled'));
      };
    });
  }
}

// 使用示例
async function example() {
  const cancelableSleep = new CancelableSleep(5000); // 5 秒
  const sleepPromise = cancelableSleep.sleep();

  setTimeout(() => {
    cancelableSleep.cancel(); // 在 2 秒后取消
  }, 2000);

  try {
    await sleepPromise;
    console.log('Finished sleeping');
  } catch (e) {
    console.error(e.message);
  }
}

example();

4. 解释

• CancelableSleep 类 ：封装了一个可取消的睡眠操作。构造函数接收一个等待时间 ms ，并提供一个 sleep 方法返回一个 Promise 。 cancel 方法用于取消等待。
• example 函数 ：演示了如何使用 CancelableSleep 类。创建一个 CancelableSleep 实例，并在 2 秒后调用 cancel 方法来取消睡眠操作。注意，使用 await 时需要处理可能的取消错误。

总结

• 基本的 sleep 函数利用 Promise 和 setTimeout 实现异步等待。
• 复杂用例中，可以扩展 sleep 函数以支持取消操作，通过 Promise 的 reject 方法处理取消情况。