当前位置：首页 > JavaScript

js 实现倒数

2026-03-14 13:57:57JavaScript

实现倒数功能的方法

使用 setTimeout 递归

通过递归调用 setTimeout 实现倒数功能，适合简单场景。

function countdown(seconds) {
  console.log(seconds);
  if (seconds > 0) {
    setTimeout(() => countdown(seconds - 1), 1000);
  }
}
countdown(5);

使用 setInterval

通过 setInterval 定时器实现倒数，需要手动清除定时器。

js 实现倒数

function countdown(seconds) {
  const timer = setInterval(() => {
    console.log(seconds--);
    if (seconds < 0) clearInterval(timer);
  }, 1000);
}
countdown(5);

使用 Promise 和 async/await

结合 Promise 和 async/await 实现更优雅的异步倒数。

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

async function countdown(seconds) {
  for (let i = seconds; i >= 0; i--) {
    console.log(i);
    await delay(1000);
  }
}
countdown(5);

添加回调函数

在倒数结束时触发回调函数，增加灵活性。

js 实现倒数

function countdown(seconds, callback) {
  console.log(seconds);
  if (seconds > 0) {
    setTimeout(() => countdown(seconds - 1, callback), 1000);
  } else {
    callback();
  }
}
countdown(5, () => console.log('倒计时结束'));

显示分钟和秒

将总秒数转换为分钟和秒格式，提升可读性。

function formatTime(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}

function countdown(totalSeconds) {
  console.log(formatTime(totalSeconds));
  if (totalSeconds > 0) {
    setTimeout(() => countdown(totalSeconds - 1), 1000);
  }
}
countdown(125); // 显示 2:05, 2:04 等

使用 requestAnimationFrame

适用于需要高精度倒数的场景，如动画效果。

function countdown(seconds) {
  const start = Date.now();
  const end = start + seconds * 1000;

  function update() {
    const remaining = Math.max(0, end - Date.now());
    console.log(Math.ceil(remaining / 1000));
    if (remaining > 0) requestAnimationFrame(update);
  }
  update();
}
countdown(5);