当前位置：首页 > JavaScript

js 实现定时

2026-04-07 04:16:44JavaScript

定时器基础实现

JavaScript 提供了两种原生定时器方法：

setTimeout(func, delay)：在指定延迟后执行一次函数
setInterval(func, delay)：每隔指定时间重复执行函数

// 一次性定时器
const timeoutId = setTimeout(() => {
  console.log('这段代码将在3秒后执行');
}, 3000);

// 周期性定时器
const intervalId = setInterval(() => {
  console.log('这段代码每2秒执行一次');
}, 2000);

清除定时器

使用对应的清除方法可以取消定时器：

clearTimeout(timeoutId);  // 取消setTimeout
clearInterval(intervalId); // 取消setInterval

精确控制方案

对于需要更精确控制的场景，可以使用 requestAnimationFrame：

let startTime;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;

  if (elapsed < 2000) { // 2秒内执行动画
    console.log('动画执行中...');
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

现代API方案

使用 ES6 的 Promise 和 async/await 实现更优雅的定时控制：

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

async function timedOperation() {
  console.log('开始');
  await delay(1000);
  console.log('1秒后执行');
}

高级定时管理

对于需要管理多个定时器的复杂场景，可以创建定时器管理器：

js 实现定时

class TimerManager {
  constructor() {
    this.timers = new Map();
  }

  set(id, callback, delay) {
    this.clear(id);
    this.timers.set(id, setTimeout(() => {
      callback();
      this.timers.delete(id);
    }, delay));
  }

  clear(id) {
    if (this.timers.has(id)) {
      clearTimeout(this.timers.get(id));
      this.timers.delete(id);
    }
  }
}

// 使用示例
const manager = new TimerManager();
manager.set('timer1', () => console.log('定时器1触发'), 1000);