JS暂停几秒执行|极客笔记

JS暂停几秒执行

在前端开发领域中，经常会遇到需要暂停一段时间后再执行某些操作的场景。比如在页面加载完成后，延迟显示某个元素，或者在用户点击按钮后，延迟执行某个动画效果。本文将详细介绍如何使用JavaScript实现暂停几秒后执行操作的方法。

使用setTimeout实现延时执行

JavaScript中的setTimeout函数可以用来延迟执行代码，其语法如下：

setTimeout(function, delay);

其中function是要执行的函数，delay是延迟的时间，单位为毫秒。下面以一个简单的示例来说明如何使用setTimeout实现延时执行：

console.log('开始执行');

setTimeout(function() {
  console.log('延时3秒后执行');
}, 3000);

console.log('继续执行');

上面的代码会依次输出”开始执行”、”继续执行”，然后等待3秒后再输出”延时3秒后执行”。

使用Promise对象实现延时执行

除了setTimeout函数，ES6中的Promise对象也可以实现延时执行的效果。我们可以创建一个返回Promise对象的函数，并在其中使用resolve方法来实现延时执行。下面是一个使用Promise对象实现延时执行的示例：

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

console.log('开始执行');

delay(3000).then(() => {
  console.log('延时3秒后执行');
});

console.log('继续执行');

上面的代码与之前的setTimeout示例达到同样的效果，依次输出”开始执行”、”继续执行”，然后等待3秒后再输出”延时3秒后执行”。

使用async/await语法糖实现延时执行

在ES2017中引入的async/await语法糖可以进一步简化异步操作的代码编写。我们可以通过在async函数内部使用await关键字来等待Promise对象的resolve，并实现延时执行的效果。下面是一个使用async/await实现延时执行的示例：

async function run() {
  console.log('开始执行');

  await new Promise(resolve => setTimeout(resolve, 3000));

  console.log('延时3秒后执行');

  console.log('继续执行');
}

run();

上面的代码定义了一个async函数run，在其中使用await关键字等待一个延时为3秒的Promise对象。执行这段代码后，会依次输出”开始执行”、”延时3秒后执行”、”继续执行”。