当前位置：首页 > JavaScript

js 实现定时

2026-02-02 10:46:22JavaScript

定时器基础实现

在JavaScript中，定时功能主要通过 setTimeout 和 setInterval 两个内置函数实现。前者用于延迟执行一次代码，后者用于周期性重复执行代码。

setTimeout 示例：

// 延迟1秒后执行
setTimeout(() => {
  console.log('Delayed message');
}, 1000);

setInterval 示例：

js 实现定时

// 每秒重复执行
const intervalId = setInterval(() => {
  console.log('Repeating message');
}, 1000);

// 清除定时器
// clearInterval(intervalId);

精确时间控制方案

对于需要更高精度的时间控制，可以使用 performance.now() 配合递归的 setTimeout：

function preciseTimer(callback, interval) {
  let expected = performance.now() + interval;
  const timeout = () => {
    const drift = performance.now() - expected;
    callback();
    expected += interval;
    setTimeout(timeout, Math.max(0, interval - drift));
  };
  setTimeout(timeout, interval);
}

preciseTimer(() => console.log('Precise tick'), 1000);

异步等待实现

ES6引入的 Promise 和 async/await 可以优雅地实现延迟：

js 实现定时

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

async function timedAction() {
  console.log('Start');
  await delay(2000);
  console.log('After 2 seconds');
}

动画帧定时

对于需要与屏幕刷新率同步的动画场景，使用 requestAnimationFrame 比 setInterval 更合适：

function animate() {
  // 动画逻辑
  console.log('Animating...');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

定时器管理

对于需要管理多个定时器的场景，建议使用对象存储定时器ID：

const timers = {
  main: null,
  secondary: null
};

function startTimers() {
  timers.main = setInterval(/*...*/, 1000);
  timers.secondary = setTimeout(/*...*/, 5000);
}

function clearAllTimers() {
  Object.values(timers).forEach(id => {
    if(id) clearInterval(id);
  });
}

标签: js