JavaScript 防止 scroll 事件频繁触发：防抖逻辑实现

阿麦

发布时间：2026-10-14| 6人浏览过

原创

在处理网页特效时，window.onscroll 等滚动事件常因高频触发导致逻辑混乱或性能瓶颈。通过引入状态变量与延迟执行机制，可以有效控制事件执行频率，确保在用户滚动结束后或指定间隔后触发核心逻辑，避免不必要的重复计算。

问题背景：Scroll 事件的高频触发

在 JavaScript 中，scroll 是一个连续触发的事件。只要用户进行微小的滚动操作，监听函数就会被反复调用。如果直接在此事件中放置业务逻辑（如弹出提示、发起请求或 DOM 渲染），会导致浏览器响应迟缓或行为违背预期。例如，简单的测试代码如下：

复制代码代码如下:

// 原始代码：滚动即触发 alert，体验极差
window.onscroll = function(){
    alert("haha");
}

上述代码会导致每次滚动都立即弹出警告框，且必须关闭后才能继续滚动，严重干扰用户操作。我们的目标通常是：用户停止滚动后，或者在一段短暂的静默期后，才执行一次关键逻辑。

初步尝试：使用 setTimeout 的局限性

直观的想法是加入延迟器，让用户滚动完成后的一段时间再执行函数。然而，直接修改如下：

复制代码代码如下:

// 改进方案 1：直接添加定时器
function haha(){
    alert("haha");
}
window.onscroll = function(){
    setTimeout(haha, 500);
}

结果分析：虽然设置了 500ms 延迟，但因为在滚动过程中 onscroll 被触发了无数次，所以 setTimeout 也被注册了无数次。最终结果是屏幕上会依次弹出多个警告框。这说明单纯的定时无法阻挡队列式的连续执行。

进阶方案：条件控制 + 延迟复位

要解决此问题，需要结合“锁”的概念。即在执行前检查一个状态变量，如果正在处理中则忽略后续触发；当逻辑执行完毕后，再重新开启状态。具体分为两步：

第 1 步：引入布尔值作为开关

定义一个变量 tur 用于标记当前是否允许执行。[点击查看完整逻辑图示]（注：此处仅为逻辑说明，实际无需图片，依赖代码理解）。初始设为 true，表示允许执行。

第 2 步：设置执行门槛与延迟

在 onscroll 中判断 tur。如果为真，则启动定时器并立即将 tur 设为 false，锁定后续触发。

复制代码代码如下:

// 中间方案：存在缺陷
function haha(){
    alert("haha");
}
var tur = true; // 创建条件
window.onscroll = function(){
    if(tur){ 
        setTimeout(haha, 500); 
        tur = false; // 触发后立即关闭开关
    }
    else {}
}

潜在问题：这个方案确实实现了只执行一次弹窗，但之后无论怎么滚动都不会再触发，因为 tur 永远停留在了 false。

第 3 步：在执行回调中复活开关

解决上述死锁的关键在于：在定时器执行的函数内部，将状态变量重新置为 true。这样，当第一次延迟逻辑执行完毕后，开关打开，允许下一次滚动再次触发。

复制代码代码如下:

// 最终可行方案：条件判断 + 延迟执行 + 状态复位
var tur = true;

function haha(){
    alert("haha");
    tur = true; // 逻辑执行完毕，复活变量，允许下次触发
}

window.onscroll = function(){
    if(tur){
        setTimeout(haha, 1000); // 延迟执行
        tur = false; // 立即锁定，屏蔽期间的新滚动
    } else {
        // 其他情况不执行任何操作
    }
}

原理解析：