当前位置：首页 > JavaScript

js 实现计时器

2026-01-30 15:34:18JavaScript

使用 `setInterval` 实现计时器

通过 setInterval 可以创建一个重复执行的计时器，适合需要持续更新的场景（如倒计时、秒表）。

js 实现计时器

let seconds = 0;
const timer = setInterval(() => {
  seconds++;
  console.log(`已运行: ${seconds}秒`);
}, 1000);

// 停止计时器（例如10秒后停止）
setTimeout(() => {
  clearInterval(timer);
  console.log("计时器停止");
}, 10000);

使用 `setTimeout` 实现单次延迟

setTimeout 适用于单次延迟执行任务，可通过递归调用实现循环计时。

js 实现计时器

let count = 0;
function runTimer() {
  count++;
  console.log(`第 ${count} 次触发`);
  if (count < 5) {
    setTimeout(runTimer, 1000);
  }
}
runTimer();

高性能计时器（`requestAnimationFrame`）

适合动画或需要与屏幕刷新率同步的场景，精度更高。

let startTime = performance.now();
function updateTimer(currentTime) {
  const elapsed = (currentTime - startTime) / 1000;
  console.log(`运行时间: ${elapsed.toFixed(2)}秒`);
  requestAnimationFrame(updateTimer);
}
requestAnimationFrame(updateTimer);

倒计时实现

结合 Date 对象计算剩余时间，适用于精确倒计时场景。

const endTime = new Date().getTime() + 10000; // 10秒后结束
function countdown() {
  const now = new Date().getTime();
  const remaining = Math.max(0, endTime - now);
  console.log(`剩余: ${(remaining / 1000).toFixed(1)}秒`);
  if (remaining > 0) {
    setTimeout(countdown, 100);
  }
}
countdown();

注意事项

清除计时器：务必在不需要时调用 clearInterval 或 clearTimeout，避免内存泄漏。
误差修正：setInterval 可能因事件循环产生延迟，可通过动态调整下次执行时间补偿。
页面隐藏时暂停：使用 visibilitychange 事件优化后台运行的计时器。

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    clearInterval(timer);
  } else {
    timer = setInterval(updateFunc, 1000);
  }
});