MDN滚动事件示例中setTimeout如何实现节流？

你对MDN那段示例代码的判断完全正确——它并没有实现真正的节流，甚至连基础的防抖逻辑都不完整，具体问题和解答如下：

为什么这段代码没减少setTimeout调用频率？ #

每次scroll事件触发时，代码都会直接调用setTimeout创建新的定时器，滚动过程中会生成大量待执行的定时器实例，完全没有降低调用频率。如果快速滚动几秒，最终会有十几个定时器先后触发，导致“滚动停止”的状态被重复更新多次。

未执行的setTimeout会不会被后续调用替换？ #

不会。每次调用setTimeout都会生成一个独立的定时器ID，之前未到执行时间的定时器并不会被覆盖或取消，除非你主动调用clearTimeout传入对应的定时器ID，否则它到时间依然会执行。原示例里只是把新的定时器ID赋值给了变量，但之前的定时器还在后台等待执行，这是典型的逻辑疏漏。

正确的防抖/节流写法 #

如果要实现滚动停止后只执行一次状态更新（防抖），必须在每次设置新定时器前清除上一个：

let timeoutId;
window.addEventListener('scroll', () => {
  // 实时更新滚动中的状态
  document.getElementById('scrollStatus').textContent = '正在滚动...';
  // 清除上一次未触发的定时器
  clearTimeout(timeoutId);
  // 重新设置定时器，滚动停止1秒后更新状态
  timeoutId = setTimeout(() => {
    document.getElementById('scrollStatus').textContent = '已停止滚动';
  }, 1000);
});

如果要实现固定时间内只处理一次滚动事件（节流），逻辑会不同，需要记录上次执行的时间：

let lastExecTime = 0;
window.addEventListener('scroll', () => {
  const now = Date.now();
  // 每1秒仅执行一次处理逻辑
  if (now - lastExecTime >= 1000) {
    console.log('当前滚动位置:', window.scrollY);
    lastExecTime = now;
  }
});

内容的提问来源于stack exchange，提问作者jrefior