当前位置：首页 > article >正文

前端防抖和节流函数的实现原理

article 2025/3/3 5:03:37

在前端开发中，防抖（Debounce）和节流（Throttle）是两种常用的优化技术，它们主要用于减少事件处理函数的执行频率，从而提高程序性能和用户体验。

防抖（Debounce）

防抖的目的是确保一个操作在一段时间内只被执行一次。例如，当用户在一个输入框中快速连续输入文字时，我们可能希望只在用户停止输入之后的一小段时间后再去执行查询操作，以避免频繁触发不必要的API调用。

实现原理：

设置定时器：每次触发事件时，取消前一个定时器，并设置一个新的定时器。
定时器到期：如果在这段时间内没有再触发事件，则执行回调函数。
延迟执行：只有在最后一次事件发生后的指定时间内没有再次触发事件，才会执行一次回调。

示例代码：

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

节流（Throttle）

节流是为了限制一个操作的执行频率，使得无论触发事件多少次，在规定的时间间隔内，该操作只能执行一次。这在处理滚动事件、窗口大小变化等高频事件时特别有用。

实现原理：

设置标志位：标记是否可以执行回调函数。
执行并锁定：当回调函数执行时，设置标志位为不可执行状态。
解锁：在规定的时间间隔之后，重新允许回调函数的执行。

示例代码：

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}