js after 实现

实现延迟执行的方法

在JavaScript中，可以通过多种方式实现延迟执行代码的效果。以下是几种常见的方法：

setTimeout函数

使用setTimeout函数是最直接的延迟执行方式。该函数接受一个回调函数和延迟时间（毫秒）作为参数。

setTimeout(() => {
  console.log('这段代码将在1秒后执行');
}, 1000);

Promise与async/await

结合Promise和async/await语法可以实现更优雅的延迟控制。

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

async function runAfterDelay() {
  await delay(2000);
  console.log('这段代码将在2秒后执行');
}
runAfterDelay();

requestAnimationFrame

对于需要与浏览器渲染周期同步的延迟操作，可以使用requestAnimationFrame。

function delayedAnimation() {
  const start = Date.now();

  function frame() {
    if (Date.now() - start >= 1500) {
      console.log('1.5秒后执行');
    } else {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}
delayedAnimation();

链式setTimeout

需要精确控制多次延迟执行时，可以采用链式调用的方式。

function sequentialDelays() {
  setTimeout(() => {
    console.log('第一次延迟1秒');

    setTimeout(() => {
      console.log('第二次延迟2秒');
    }, 2000);
  }, 1000);
}
sequentialDelays();

取消延迟执行

使用clearTimeout可以取消尚未执行的延迟操作。

const timerId = setTimeout(() => {
  console.log('这段代码不会执行');
}, 3000);

clearTimeout(timerId);

每种方法适用于不同的场景：简单延迟使用setTimeout，需要精确帧同步时选择requestAnimationFrame，而异步流程控制则更适合使用Promise方案。根据具体需求选择最合适的实现方式。