JavaScript防抖与节流：原理、实现及适用场景解析

前言

在 JavaScript 开发中，防抖（Debounce）和节流（Throttle）是两种常用的事件处理优化技术。它们的核心目标一致：通过限制事件处理函数的触发频率，降低浏览器渲染压力和服务器请求负载，从而提升应用性能。

防抖机制

防抖的核心逻辑在于“延迟执行”与“重置计时”。当事件被触发时，系统不会立即执行处理函数，而是启动一个定时器等待指定时长（例如 500ms）。若在等待期间事件再次被触发，则清除原有定时器并重新计时。只有当时间间隔内不再有新事件触发时，处理函数才会最终执行。

防抖功能主要依赖定时器实现，具体代码如下：

function debounce(fun, time) {
    let timer
    return function () {
        let that = this
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
            fun.call(that)
        }, time)
    }
}

在上述代码中，`fun` 代表实际的事件处理函数，`time` 为延迟执行的毫秒数。每次触发事件时，代码首先检查 `timer` 变量是否已存在定时器实例。若存在，则先调用 `clearTimeout` 清除旧定时器；随后创建新的定时器，在指定延迟后执行 `fun`。这种机制确保了只有最后一次触发后的静默期结束后，函数才会运行。

节流机制

节流的逻辑是“固定频率执行”。当事件触发时，处理函数会立即执行（或根据策略执行），随后进入一段冷却时间（如 500ms）。在此冷却期内，后续的事件触发将被忽略或排队，直到冷却时间结束，函数才能再次被允许执行。这种方式保证了函数在单位时间内执行的次数上限。

节流功能主要有两种常见的实现路径：

• 方案一：基于定时器实现

function throttlea(fun, t) {
    let timer = null
    return function () {
        let that = this
        if (!timer) {
            timer = setTimeout(function () {
                fun.call(that)
                timer = null
            }, t)
        }
    }
}

该实现方式中，事件触发后会立即设置一个定时器。在定时器到期并执行处理函数之前，`timer` 变量不为空，因此后续的触发检查会直接跳过。只有当定时器执行完毕并将 `timer` 重置为 `null` 后，下一次事件才能重新进入执行流程。这种方式保证了函数执行的间隔至少为设定时间。

• 方案二：基于时间戳实现

function throttle(fun, time) {
    let start = 0
    return function () {
        let that = this
        let current = Date.now()
        if (current - start >= time) {
            fun.call(that)
            start = current
        }
    }
}

此方式通过记录上次执行的时间戳来控制频率。初始化时 `start` 设为 0，每次触发事件时获取当前时间戳 `current`。若当前时间与 `start` 的差值大于等于设定间隔，则执行处理函数并更新 `start` 为当前时间。由于初始 `start` 为 0，第一次触发时差值必然满足条件，因此函数会立即执行，后续触发则受限于时间间隔。

场景总结

防抖适用于需要等待用户操作结束的场景，例如搜索框输入完成后发起接口请求，避免每次按键都发送请求。

节流适用于需要限制执行频率的场景，例如窗口滚动时的懒加载或按钮防重复点击，确保函数不会过于频繁地执行。

本文介绍了 JavaScript 中防抖与节流的原理及区别，更多相关内容请查阅本站过往文章或继续浏览后续教程。感谢支持！