当前位置：首页 > JavaScript

js实现延时执行

2026-01-31 00:08:53JavaScript

延时执行的方法

在JavaScript中，实现延时执行有多种方式，以下是几种常见的方法：

setTimeout

使用setTimeout函数可以在指定的时间后执行代码。该方法接受一个回调函数和延迟时间（毫秒）作为参数。

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

Promise与async/await

结合Promise和async/await可以实现更清晰的延时逻辑，尤其适用于需要链式调用的场景。

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

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

delayedFunction();

setInterval与clearInterval

如果需要周期性执行代码，可以使用setInterval，并通过clearInterval取消。

let intervalId = setInterval(() => {
  console.log('这段代码每1秒执行一次');
}, 1000);

// 5秒后取消定时器
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

requestAnimationFrame

对于需要与浏览器渲染帧同步的延时操作，可以使用requestAnimationFrame。适合动画或高频更新的场景。

function delayedAnimation() {
  const start = Date.now();
  function frame() {
    if (Date.now() - start < 1000) {
      requestAnimationFrame(frame);
    } else {
      console.log('1秒后执行动画逻辑');
    }
  }
  requestAnimationFrame(frame);
}

delayedAnimation();

使用Generator函数

通过Generator函数和yield可以实现分步延时执行，适用于复杂流程控制。

js实现延时执行

function* delayedTasks() {
  yield new Promise(resolve => setTimeout(resolve, 1000));
  console.log('第一步完成');
  yield new Promise(resolve => setTimeout(resolve, 1500));
  console.log('第二步完成');
}

const iterator = delayedTasks();
iterator.next().value.then(() => iterator.next());