JS函数防抖与节流的原理及实现解析

概述

函数防抖和节流均属于高阶函数的范畴，它们接收一个原始函数作为参数，并返回一个经过包装的新函数。新函数内部集成了防抖或节流的逻辑控制，从而改变原函数的执行行为。

从设计模式的角度看，防抖和节流可被视为一种“函数工厂”。它们对传入的函数进行加工改造，最终产出具备特定性能优化功能的新函数实例。

两者的核心区别在于执行策略：函数防抖强调在指定时间窗口内仅执行一次，而函数节流则强调以固定的时间间隔执行。

考虑一个典型的Web交互场景：页面中有一个“加载更多”按钮，点击后通过Ajax异步向后端请求数据。由于网络响应存在延迟，若用户在短时间内连续多次点击该按钮，常规逻辑下每次点击都会立即触发一次Ajax请求。虽然前几次请求可能尚可接受，但若用户连续点击n次，系统将短时间内收到n个相同的请求。后端需逐一处理并返回数据，前端随之进行n次DOM渲染。尽管最终展示的内容可能相同，但这种高频操作不仅增加了服务器负载，也造成了浏览器不必要的渲染开销，这就是函数频繁执行导致的性能副作用。

为解决上述问题，需对按钮的点击事件回调函数进行优化，以抑制其频繁执行带来的负面影响。

1. 函数防抖（debounce）

防抖的核心逻辑是在函数实际执行前引入一个等待期。当函数被触发时，启动计时器；若在等待期内函数再次被触发，则重置计时器，重新计算等待时间。只有当等待期结束且期间未再触发函数时，才真正执行该函数。这种机制确保了在高频操作中，只有最后一次操作会被执行。

回到“加载更多”的场景，假设后端Ajax响应时间约为2秒。若设置防抖时间为2秒，当用户第一次点击按钮时，函数并未立即发送请求，而是进入等待状态。若用户在2秒内再次点击，等待时间重置。只有当用户停止点击且等待时间耗尽后，函数才会真正执行，向后端发送Ajax请求。这有效避免了重复请求。

函数防抖的具体实现方式如下：

function debounce(fn, delay){
    let timeId = null
    return function(){
        let context = this
        if(timeId){window.clearTimeout(timeId)}
        timeId = setTimeout(()=>{
            fn.apply(context, arguments)
            timeId = null
        },delay)
    }
}

2. 函数节流（throttle）

节流的设计思路是在函数执行后引入一个冷却期。与防抖不同，节流在第一次触发时立即执行函数，但在执行完毕后设置一个冷却时间。在冷却期内，后续触发将被忽略或延迟，直到冷却时间结束，函数才允许再次执行。这种方式保证了函数在单位时间内有规律地执行。

同样以“加载更多”为例，若设置冷却时间为2秒，用户第一次点击后，回调函数立即执行并发送Ajax请求。若用户紧接着再次点击，由于2秒的冷却期尚未结束，第二次触发将被忽略或挂起，直到冷却时间结束。这确保了在用户高频点击期间，只有第一次请求被立即处理，后续请求被限制在冷却期之后。

function throttle(fn, delay){
    let canUse = true
    return function(){
        if(canUse){
            fn.apply(this, arguments)
            canUse = false
            setTimeout(()=>canUse=true, delay)
        }
    }
}

以上是对JavaScript中函数防抖与节流机制的详细解析，涵盖了其核心原理、应用场景及实现思路。如需了解更多相关技术细节，请参阅本站其他相关文章。