09. 定时器：倒计时、轮询、节流与防抖

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

搜索关键词（防抖演示）

三、知识点提醒

防抖适合搜索输入、窗口 resize、自动保存。
节流适合滚动监听、鼠标移动等高频事件。
创建新定时器前，通常先清理旧定时器。

四、练习建议

自己写一个 `throttle()` 并绑定到滚动事件。
把倒计时结束后按钮设为禁用。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/09-timers.js，下面同步展示，方便学习和复制。

// 页面 09：定时器、防抖、倒计时
const timerOutput = document.querySelector('#p9-output');
const startTimerBtn = document.querySelector('#p9-start');
const stopTimerBtn = document.querySelector('#p9-stop');
const timerSearch = document.querySelector('#p9-search');
let countdownId = null;
let secondsLeft = 10;

function debounce(fn, delay = 400) {
  let timerId = null;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn.apply(this, args), delay);
  };
}

function startCountdown() {
  clearInterval(countdownId);
  secondsLeft = 10;
  timerOutput.textContent = `倒计时：${secondsLeft}s`;

  countdownId = setInterval(() => {
    secondsLeft -= 1;
    timerOutput.textContent = `倒计时：${secondsLeft}s`;

    if (secondsLeft <= 0) {
      clearInterval(countdownId);
      timerOutput.textContent = '倒计时结束，可以执行下一步操作。';
    }
  }, 1000);
}

const searchWithDebounce = debounce((keyword) => {
  timerOutput.textContent = `模拟搜索：${keyword || '空关键词'}`;
}, 500);

timerSearch.addEventListener('input', (event) => {
  searchWithDebounce(event.target.value.trim());
});

startTimerBtn.addEventListener('click', startCountdown);
stopTimerBtn.addEventListener('click', () => {
  clearInterval(countdownId);
  timerOutput.textContent = '倒计时已停止。';
});