JS实现异步延迟？老司机教你三种必备姿势！

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JS实现异步延迟？这三种方法你必须知道！》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

异步延迟执行是通过setTimeout、Promise和async/await三种方式实现的，其中setTimeout用于一次性延迟执行代码，例如setTimeout(function() { console.log("延迟2秒执行"); }, 2000); Promise提供结构化异步处理方式，结合setTimeout可实现延迟，如function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }，而async/await基于Promise，使异步代码更易读，如使用await wait(1000)暂停1秒。setTimeout与setInterval的区别在于setTimeout仅执行一次，而setInterval周期性执行，需手动清除。取消定时器可通过clearTimeout(timeoutId)或clearInterval(intervalId)实现。Promise.then采用链式调用处理异步操作，而async/await则通过await关键字等待Promise resolve，使代码更同步化且更具可读性。

异步延迟执行，简单来说，就是让一段JavaScript代码在指定的时间后执行。这在处理用户交互、动画效果，或者避免阻塞主线程时非常有用。

setTimeout、Promise和async/await是三种常见的实现方案。

setTimeout

setTimeout是JavaScript内置的函数，用于在指定的毫秒数后执行一个函数。

console.log("开始");

setTimeout(function() {
  console.log("延迟2秒执行");
}, 2000);

console.log("结束");

这段代码会先输出“开始”，然后立即输出“结束”，最后在2秒后输出“延迟2秒执行”。setTimeout不会阻塞后续代码的执行。

Promise

Promise提供了一种更结构化的方式来处理异步操作。结合setTimeout，可以实现延迟执行。

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

async function myFunction() {
  console.log("开始");
  await delay(2000);
  console.log("延迟2秒执行");
  console.log("结束");
}

myFunction();

这里，delay函数返回一个Promise，它在指定的毫秒数后resolve。async/await使得代码看起来更像同步代码，但实际上它是异步执行的。

async/await

async/await是建立在Promise之上的语法糖，让异步代码更易于阅读和编写。

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

async function execute() {
  console.log("开始执行");
  await wait(1000); // 暂停1秒
  console.log("1秒后执行");
  await wait(2000); // 暂停2秒
  console.log("3秒后执行");
}

execute();

这段代码利用async函数和await关键字，使得代码在wait函数返回的Promise resolve后才会继续执行。这使得异步代码的流程控制更加清晰。

setTimeout和setInterval的区别是什么？

setTimeout只执行一次延迟操作，而setInterval会按照指定的时间间隔重复执行。

// setTimeout示例
setTimeout(function() {
  console.log("只执行一次");
}, 1000);

// setInterval示例
let intervalId = setInterval(function() {
  console.log("每秒执行一次");
}, 1000);

// 停止setInterval
setTimeout(function() {
  clearInterval(intervalId);
  console.log("停止setInterval");
}, 5000); // 5秒后停止

setTimeout适合用于只需要延迟执行一次的场景，而setInterval适合用于需要周期性执行的场景。注意在使用setInterval时，需要手动清除定时器，否则会一直执行下去。

如何取消setTimeout或setInterval？

可以使用clearTimeout和clearInterval函数来取消定时器。

let timeoutId = setTimeout(function() {
  console.log("这段代码可能不会执行");
}, 2000);

clearTimeout(timeoutId); // 取消setTimeout

let intervalId = setInterval(function() {
  console.log("这段代码也不会执行");
}, 1000);

clearInterval(intervalId); // 取消setInterval

如果在定时器执行之前调用了clearTimeout或clearInterval，那么定时器就不会执行。这在某些需要动态控制定时器的场景下非常有用。例如，用户在输入过程中，可以先取消之前的定时器，然后再重新设置一个新的定时器，以避免频繁触发操作。

Promise.then和async/await有什么区别？

虽然Promise.then和async/await都可以用于处理异步操作，但它们在代码风格和可读性上有所不同。async/await通常被认为更易于阅读和编写，因为它使得异步代码看起来更像同步代码。

// Promise.then示例
function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("数据已加载");
    }, 1000);
  });
}

getData()
  .then(data => {
    console.log(data);
    return "处理后的数据";
  })
  .then(processedData => {
    console.log(processedData);
  });

// async/await示例
async function fetchData() {
  let data = await getData();
  console.log(data);
  let processedData = "处理后的数据";
  console.log(processedData);
}

fetchData();

Promise.then需要使用链式调用来处理异步操作，而async/await可以使用await关键字来等待Promise resolve，使得代码更具可读性。async/await实际上是Promise的语法糖，底层仍然使用Promise来实现异步操作。选择哪种方式取决于个人偏好和项目需求。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS实现异步延迟？老司机教你三种必备姿势！》文章吧，也可关注golang学习网公众号了解相关技术文章。