js 实现计时器

使用 setTimeout 实现单次计时器

setTimeout(() => {
  console.log('计时结束');
}, 1000); // 1000毫秒后执行

使用 setInterval 实现重复计时器

let counter = 0;
const intervalId = setInterval(() => {
  console.log(`已过去 ${++counter} 秒`);
  if (counter >= 5) {
    clearInterval(intervalId);
  }
}, 1000);

使用 requestAnimationFrame 实现高精度计时器

let startTime = null;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  console.log(`已过去 ${elapsed.toFixed(2)} 毫秒`);
  if (elapsed < 5000) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

使用 Date 对象实现精确计时

const start = new Date();
setInterval(() => {
  const now = new Date();
  const elapsed = now - start;
  console.log(`精确计时: ${elapsed} 毫秒`);
}, 100);

倒计时实现

let timeLeft = 10;
const countdown = setInterval(() => {
  console.log(`剩余: ${timeLeft--} 秒`);
  if (timeLeft < 0) {
    clearInterval(countdown);
    console.log('倒计时结束');
  }
}, 1000);

性能优化的计时器实现

let lastTime = performance.now();
let fps = 0;
function update() {
  const now = performance.now();
  fps = 1000 / (now - lastTime);
  lastTime = now;
  console.log(`当前FPS: ${fps.toFixed(2)}`);
  requestAnimationFrame(update);
}
requestAnimationFrame(update);

暂停和恢复计时器

let timer;
let remaining = 5000;
let start;

function startTimer() {
  start = Date.now();
  timer = setTimeout(() => {
    console.log('计时完成');
  }, remaining);
}

function pauseTimer() {
  clearTimeout(timer);
  remaining -= Date.now() - start;
}

// 调用 startTimer() 开始
// 调用 pauseTimer() 暂停

Web Worker 后台计时器

worker.js:

let startTime = Date.now();
setInterval(() => {
  postMessage(Date.now() - startTime);
}, 1000);

主线程:

const worker = new Worker('worker.js');
worker.onmessage = (e) => {
  console.log(`后台计时: ${e.data} 毫秒`);
};