滚动1秒后单次触发事件问题：代码多次触发如何解决？

嘿，这个场景太常见啦！滚动事件本身就是个高频触发的事件——用户滚动页面时，浏览器会连续触发好多次scroll事件，所以你的代码多次执行完全是正常现象。咱们可以通过防抖函数或者添加触发开关来解决，分两种情况给你方案：

情况1：每次滚动停止1秒后触发一次事件 #

如果你的需求是用户每次滚动停下来，过1秒就触发一次事件（比如滚动过程中多次停顿，每次停顿后都触发），用防抖函数最适合。防抖的核心就是：在事件连续触发时，只有当事件停止触发指定时间后，才执行目标函数。

先写一个通用的防抖函数：

function debounce(func, delay) {
  let timeoutId;
  return function() {
    // 保存当前上下文和参数，避免this指向错误
    const context = this;
    const args = arguments;
    
    // 每次滚动时，清除之前还没执行的定时器
    clearTimeout(timeoutId);
    
    // 重新设置定时器，delay毫秒后执行你的事件函数
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

然后这样使用：

// 定义你要触发的业务逻辑
function myScrollEvent() {
  console.log("滚动停止1秒啦，触发事件！");
  // 这里写你实际要执行的代码
}

// 用防抖包装你的事件函数，延迟1000毫秒（1秒）
const debouncedHandler = debounce(myScrollEvent, 1000);

// 绑定滚动事件
window.addEventListener('scroll', debouncedHandler);

情况2：整个页面生命周期只触发一次事件 #

如果你的需求是用户第一次滚动后，过1秒触发一次事件，之后不管怎么滚动都不再触发，那就在防抖的基础上加个开关标记：

// 标记是否已经触发过事件
let hasTriggered = false;

function debounceOnce(func, delay) {
  let timeoutId;
  return function() {
    // 如果已经触发过，直接返回不执行
    if (hasTriggered) return;
    
    const context = this;
    const args = arguments;
    
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
      // 触发后标记为已执行，后续不再触发
      hasTriggered = true;
    }, delay);
  };
}

// 使用方式和之前一致
const onceHandler = debounceOnce(myScrollEvent, 1000);
window.addEventListener('scroll', onceHandler);

额外提醒 #

如果之后不再需要监听滚动事件，记得移除监听，避免内存泄漏：

window.removeEventListener('scroll', debouncedHandler);
// 或者对应onceHandler
// window.removeEventListener('scroll', onceHandler);

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