JavaScript 中的暂停|极客笔记

JavaScript 中的暂停

在 JavaScript 中，有时候我们需要让程序在某个特定点暂停一段时间，然后再继续执行下去。这种暂停可以用来模拟动画效果、控制异步操作的执行顺序等。在本文中，我们将探讨几种实现 JavaScript 暂停功能的方法，并分析它们的优缺点。

setTimeout 和 setInterval

最常见的实现暂停的方式是使用 setTimeout 和 setInterval 函数。setTimeout 函数可以在指定的时间后执行一次回调函数，而 setInterval 函数则可以在每隔一段时间执行一次回调函数。

下面是一个使用 setTimeout 实现暂停效果的示例代码：

function pause(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

async function example() {
  console.log('Start');
  await pause(2000);
  console.log('Paused for 2 seconds');
  await pause(3000);
  console.log('Paused for another 3 seconds');
  console.log('End');
}

example();

在上面的代码中，我们定义了一个名为 pause 的函数，它返回一个 Promise，Promise 在指定的时间后才会得以 resolve。然后我们定义了一个异步函数 example，其中使用 await 关键字来暂停函数的执行，等待 pause 函数的 Promise 被 resolve。最后调用 example 函数可以看到输出的效果是程序会在 console.log 输出后暂停指定的时间。

Generator 函数

另一种实现暂停的方式是使用 Generator 函数。Generator 函数是 ES6 中引入的一种特殊函数，可以在函数体内部暂停和继续执行。通过控制 Generator 函数的 next 方法，我们可以在需要的时候暂停函数的执行。

下面是一个使用 Generator 函数实现暂停效果的示例代码：

function* pauseGenerator() {
  console.log('Start');
  yield new Promise(resolve => setTimeout(resolve, 2000));
  console.log('Paused for 2 seconds');
  yield new Promise(resolve => setTimeout(resolve, 3000));
  console.log('Paused for another 3 seconds');
  console.log('End');
}

const gen = pauseGenerator();
gen.next().value.then(() => gen.next());

在上面的代码中，我们定义了一个 Generator 函数 pauseGenerator，通过 yield 关键字可以暂停函数的执行，并返回一个 Promise。然后我们创建了一个 Generator 对象 gen，通过调用 gen.next().value.then(() => gen.next()) 来实现暂停和继续执行。通过执行上述代码可以看到与之前的 setTimeout 实现暂停的效果是一样的。

async/await

除了利用 setTimeout、setInterval 和 Generator 函数来实现暂停，ES7 中引入的 async/await 语法也提供了一种更加简洁方便的方式来实现暂停。

下面是一个使用 async/await 实现暂停效果的示例代码：

async function pauseAsync(milliseconds) {
  await new Promise(resolve => setTimeout(resolve, milliseconds));
}

async function exampleAsync() {
  console.log('Start');
  await pauseAsync(2000);
  console.log('Paused for 2 seconds');
  await pauseAsync(3000);
  console.log('Paused for another 3 seconds');
  console.log('End');
}

exampleAsync();

在上面的代码中，我们定义了一个异步函数 pauseAsync，通过 await 关键字暂停函数的执行，然后在 exampleAsync 函数中调用 pauseAsync 函数来实现暂停效果。通过执行上述代码可以看到输出的效果与之前的方法是一致的。