JavaScript 函数的暂停和恢复实例详解

什么是异步操作

在了解如何暂停和恢复异步操作之前，首先需要明确什么是异步操作。

异步操作（Asynchronous Operation）指的是一个操作的执行不会阻塞代码的执行，也就是说，在进行异步操作的过程中，代码还可以继续执行其他任务。

在 JavaScript 中，常见的异步操作包括定时器、网络请求和文件读写等操作。

为什么需要暂停和恢复异步操作

在进行异步操作时，有时候我们需要在特定的时间点暂停该操作，等待其他操作完成后再恢复执行。这种需求在很多场景下都有用，例如在处理大量数据时，可以通过暂停异步操作，释放部分的 CPU 资源，避免出现浏览器卡顿或崩溃等情况。

如何暂停和恢复异步操作

方法一：使用 Promise

Promise 是 JavaScript 中的一个异步操作解决方案。通过 Promise，可以很方便地实现异步操作的暂停和恢复。

下面以定时器为例，演示如何使用 Promise 暂停和恢复异步操作。

function delay(fn, ms, ...args) {
  return new Promise(resolve => {
    setTimeout(() => {
      const result = fn(...args);
      resolve(result);
    }, ms);
  });
}

delay(console.log, 3000, 'hello, world!').then(() => {
  console.log('delayed 3 seconds!');
});

在上述代码中，delay 函数接受三个参数：一个需要延时执行的函数 fn，延时的时间 ms，以及 fn 函数的实参 args。

delay 函数返回一个 Promise 对象，其 resolve 函数被调用时会执行 fn 函数，并将其返回值传递给 then 方法所绑定的回调函数。

这里我们使用 delay 函数封装了 console.log 函数，并将其延时 3 秒后执行。在 delay 函数执行结束后，调用 then 方法所绑定的回调函数，输出一段提示语。这种方式实现的异步操作可以随时暂停和恢复，具备很强的灵活性。

方法二：使用 Generator

Generator 是 ES6 中的一种异步编程解决方案。通过 Generator，可以很方便地实现异步操作的暂停和恢复。

下面以定时器为例，演示如何使用 Generator 暂停和恢复异步操作。

function* delayedLog(ms, message) {
  yield new Promise((resolve) => setTimeout(resolve, ms));
  console.log(message);
}

const gen = delayedLog(3000, 'hello, world!');
gen.next().value.then(() => gen.next());

在上述代码中，delayedLog 函数接受两个参数：延时的时间 ms，以及需要输出的提示语 message。

delayedLog 函数返回一个 Generator 对象，其 next 方法被调用时会执行 yield 关键字后的代码，并暂停在 yield 关键字处，等待下一次调用 next 方法恢复执行。

这里我们使用 delayedLog 函数封装了 console.log 函数，并将其延时 3 秒后执行。在 delayedLog 函数执行结束后，调用 next 方法，返回一个 Promise 对象，其 resolve 函数被调用时执行下一个 yield 关键字后面的代码。

这种方式实现的异步操作可以随时暂停和恢复，但其语法比起 Promise 更为复杂一些。