当前位置：首页 > JavaScript

js 实现延时执行

2026-04-07 15:58:14JavaScript

延时执行的方法

在JavaScript中，实现延时执行可以通过以下几种方式：

setTimeout

setTimeout是JavaScript中最常用的延时执行方法。它接受一个回调函数和一个以毫秒为单位的时间参数，在指定的时间后执行回调函数。

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

Promise与setTimeout结合

使用Promise可以更好地处理异步操作，结合setTimeout可以实现延时执行。

js 实现延时执行

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

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

async/await

在异步函数中，可以使用async/await语法结合setTimeout实现更清晰的延时执行代码。

async function delayedExecution() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('这段代码将在1秒后执行');
}

delayedExecution();

setInterval与clearInterval

如果需要重复执行某个操作，可以使用setInterval，并通过clearInterval来取消执行。

js 实现延时执行

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

// 取消执行
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

requestAnimationFrame

对于需要与浏览器渲染同步的延时操作，可以使用requestAnimationFrame，通常用于动画或其他高性能需求。

function delayedAnimation() {
  let start = null;
  function step(timestamp) {
    if (!start) start = timestamp;
    const elapsed = timestamp - start;
    if (elapsed < 1000) {
      requestAnimationFrame(step);
    } else {
      console.log('这段代码在1秒后执行');
    }
  }
  requestAnimationFrame(step);
}

delayedAnimation();

使用Generator函数

通过Generator函数和yield可以实现更复杂的延时控制逻辑。

function* delayedGenerator() {
  yield new Promise(resolve => setTimeout(resolve, 1000));
  console.log('这段代码将在1秒后执行');
}

const gen = delayedGenerator();
gen.next().value.then(() => gen.next());

这些方法可以根据具体需求选择使用，setTimeout是最简单直接的方式，而Promise和async/await则更适合复杂的异步流程控制。

标签: js