JS等待时间 - Javascript

在编写 JavaScript 代码时，有时需要等待一定时间后再执行特定的操作。常用的场景包括延迟执行、周期性执行、等待某个异步操作完成等等。本文将介绍几种实现 JavaScript 等待时间的方法。

1. setTimeout()

setTimeout() 方法是 JavaScript 原生提供的一个函数，可以让代码在指定的时间延迟执行。示例代码如下：

console.log('start');
setTimeout(() => {
  console.log('end');
}, 1000); // 等待1秒后输出'end'

上面的代码中，先输出 'start' ，然后 1 秒后才输出 'end' 。

2. setInterval()

setInterval() 方法可以周期性地执行某段代码，同样接受一个时间参数，可以指定周期的时间间隔。示例代码如下：

console.log('start');
setInterval(() => {
  console.log('tick');
}, 1000); // 每隔1秒输出'tick'

上面的代码中，每隔 1 秒就会输出一次 'tick' 。

注意，使用 setInterval() 方法时需要注意防止代码出现死循环的情况。

3. Promise

Promise 是 ES6 中新增的语法，用于管理异步操作。通过 Promise 的 then() 方法可以在异步操作完成后执行特定的操作。Promise 还提供了一个 all() 方法，可以等待多个异步操作完成后再进行下一步操作。示例代码如下：

console.log('start');
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('end');
  }, 1000); // 等待1秒后输出'end'
}).then((data) => {
  console.log(data);
});

上面的代码中，使用 Promise 对象封装了异步操作，然后在 then() 方法中定义异步操作完成后执行的操作。

4. async/await

async/await 是 ES8 中新增的语法，用于简化 Promise 的操作。async/await 可以让异步操作的代码看起来像同步操作一样。示例代码如下：

console.log('start');
async function foo() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('end');
      resolve();
    }, 1000); // 等待1秒后输出'end'
  });
}
foo();

上面的代码中，使用 async/await 对异步操作进行了封装，使得代码看起来像同步操作一样。

总结

JavaScript 提供了多种方法来实现等待时间的操作。其中，setTimeout() 和 setInterval() 是最常用的两种方法，而 Promise 和 async/await 则更适用于管理异步操作的场景。在使用这些方法时需要注意对代码的控制，避免出现死循环等问题。