JS 等待几秒钟

在 JavaScript 中，有时我们需要等待一段时间才能执行后续操作。例如，我们可能需要等待 AJAX 请求完成或执行某些动画效果。

在本教程中，我们将探讨在 JavaScript 中等待几秒钟的不同方法。

使用 setTimeout() 函数

setTimeout() 函数是一种简单的方法，可以等待指定的时间（以毫秒为单位）之后执行函数。

setTimeout(function(){
  // 等待 2 秒钟后执行此代码
}, 2000);

在此示例中，在 2 秒钟后执行了一个匿名函数。

使用 Promise 和 setTimeout() 函数

Promise 是 JavaScript 中的一个强大概念，它使我们能够编写更加优雅和可读的异步代码。我们可以使用 Promise 和 setTimeout() 函数来等待指定的时间。

function wait(duration) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, duration);
  });
}

wait(2000).then(function() {
  // 等待 2 秒钟后执行此代码
});

在此示例中，我们定义了一个 wait() 函数，它接受一个持续时间参数并返回一个 Promise。该 Promise 在指定的时间后被 resolved。我们随后可以使用 .then() 方法来指定要等待的时间之后要执行的代码。

使用 async/await 和 setTimeout() 函数

async/await 是 ECMAScript 2017 中引入的一项功能，它使得异步代码看起来像同步代码一样易读和易于编写。我们可以使用 async/await 和 setTimeout() 函数来等待指定的时间。

function wait(duration) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, duration);
  });
}

async function doStuff() {
  console.log('开始等待...');
  await wait(2000);
  console.log('2 秒钟已过...');
}

doStuff();

在此示例中，我们定义了一个 wait() 函数，它与上一个示例相同。但是，我们使用 async 函数 doStuff() 来执行异步代码。在 doStuff() 函数中，我们使用 await 来等待指定的时间。

结论

在 JavaScript 中，我们可以使用不同的技术来等待指定的时间。虽然 setTimeout() 是一种最简单的方法，但是 Promise 和 async/await 能够使我们编写更加可读、优雅和可维护的异步代码。

以上内容参照阮一峰老师的《ECMAScript 6 入门》和《JavaScript 高级程序设计》两本书籍整合而成。