js 实现倒数

使用 setTimeout 实现倒数

通过 setTimeout 递归调用实现倒数功能。设置一个初始值，每次递归调用时减少该值，直到达到终止条件。

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

使用 setInterval 实现倒数

使用 setInterval 定时器实现倒数功能。设置一个初始值，每隔一秒减少该值，当达到终止条件时清除定时器。

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

使用 async/await 实现倒数

通过 async/await 结合 setTimeout 实现倒数功能。使用异步函数和 Promise 来模拟等待效果。

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);

使用 Date 对象实现精确倒数

利用 Date 对象记录时间差，实现更精确的倒数功能。通过计算时间差来确保倒数的准确性。

function countdown(seconds) {
  const start = Date.now();
  const end = start + seconds * 1000;
  const timer = setInterval(() => {
    const remaining = Math.round((end - Date.now()) / 1000);
    if (remaining >= 0) {
      console.log(remaining);
    } else {
      clearInterval(timer);
    }
  }, 1000);
}
countdown(5);

使用 requestAnimationFrame 实现倒数

通过 requestAnimationFrame 实现高性能倒数功能。适合需要与动画或高频更新结合的倒数场景。

function countdown(seconds) {
  const start = Date.now();
  const end = start + seconds * 1000;
  function update() {
    const remaining = Math.round((end - Date.now()) / 1000);
    if (remaining >= 0) {
      console.log(remaining);
      requestAnimationFrame(update);
    }
  }
  update();
}
countdown(5);

使用生成器函数实现倒数

通过生成器函数实现倒数功能。利用生成器的暂停和恢复特性控制倒数流程。

function* countdownGen(seconds) {
  while (seconds >= 0) {
    yield seconds;
    seconds--;
  }
}

const gen = countdownGen(5);
const timer = setInterval(() => {
  const { value, done } = gen.next();
  if (done) {
    clearInterval(timer);
  } else {
    console.log(value);
  }
}, 1000);