当前位置：首页 > JavaScript

js after 实现

2026-04-06 05:57:25JavaScript

实现延迟执行的方法

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

setTimeout

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

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

Promise与async/await

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

js after 实现

const delay = (ms) => 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();

取消延迟执行

如果需要取消已设置的延迟执行，可以使用对应的清除方法。

js after 实现

// setTimeout的清除
const timerId = setTimeout(() => {}, 1000);
clearTimeout(timerId);

// requestAnimationFrame的清除
const requestId = requestAnimationFrame(() => {});
cancelAnimationFrame(requestId);

循环延迟执行

使用setInterval可以实现周期性延迟执行。

const intervalId = setInterval(() => {
  console.log('每隔1秒执行一次');
}, 1000);

// 清除循环
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

现代API方案

较新的浏览器环境支持queueMicrotask和scheduler.postTask等API。

// 微任务延迟
queueMicrotask(() => {
  console.log('在当前事件循环的微任务阶段执行');
});

// 调度API（实验性特性）
if ('scheduler' in window) {
  scheduler.postTask(() => {
    console.log('优先级任务调度');
  }, { priority: 'user-blocking' });
}