怎么理解 javascript 中防抖和节流

理解JavaScript中的防抖和节流关键在于掌握它们各自的核心目标和实现方式。防抖（Debouncing）和节流（Throttling）是两种在特定条件下控制函数执行频率的技术。在Web开发中，它们主要用来优化性能、提高用户体验。防抖的核心在于控制高频事件触发后只在指定时间过后执行一次，而节流则是在一定时间内只允许函数执行一次。让我们详细解析防抖的概念: 当一个行为持续触发时，只有当行为停止触发后的一段时间内没有再次触发行为，才执行一次函数。这种技术常用于搜索框输入。用户在停止输入一段时间后，才开始执行搜索，这样可以减少服务器的请求次数。

一、防抖（DEBOUNCING）

防抖技术的实质是延迟函数的执行。在JavaScript开发中，事件如滚动、键盘输入等可以很快速地被触发，如果每次事件触发都立即执行相应的处理函数，可能会给服务器带来不必要的压力，甚至影响前端性能。防抖技术通过设置一个延迟时间，当事件在这个时间内再次被触发，则重新计时，只有当事件在设定的时间内没有再次被触发，才执行处理函数。

实现逻辑: 设定一个延迟执行的函数，以及一个定时器。当事件触发时，清除之前的定时器，重新设置一个定时器。如果在延迟时间内事件再次触发，则定时器被清除，重新计时。这样能有效地减少函数的执行次数，特别是对于需要大量计算、频繁请求资源或更新DOM的操作非常有用。

二、节流（THROTTLING）

节流技术则侧重于限制函数在一定时间内的执行次数。与防抖不同，节流不是延迟执行，而是在规定时间内只执行一次函数。这对处理诸如滚动、窗口缩放、鼠标移动等频繁触发的事件尤其有效。

实现逻辑: 记录一个标记时间点，当事件触发时，比较当前时间与标记时间点的差值，如果大于设定的阈值，则执行函数，并更新标记时间点。这样不论事件触发多频繁，函数执行的频率也只是在我们所设定的时间间隔内。

三、防抖与节流的应用场景

不同的场景下更适合使用防抖或节流。了解它们的特性和应用场景对于优化网页性能、提升用户体验至关重要。

应用防抖的场景

搜索框实时搜索: 用户在输入框输入关键词时，只有在停止输入一段时间后才进行搜索请求，减少请求次数。
窗口大小调整（resize事件）: 只有当用户调整浏览器窗口大小并停止一段时间后，才执行相应的布局调整函数。

应用节流的场景

滚动事件处理: 当用户滚动页面时，以固定的时间间隔执行相关的事件处理，如懒加载图片。
游戏中的按键响应: 限制玩家的操作频率，确保游戏的流畅性与公正性。

四、实现防抖和节流的代码示例

实现这两种技术的基本思路已在上文中介绍。下面通过代码示例具体展现如何在JavaScript中实现防抖和节流。

防抖函数实现

function debounce(func, delay) {
    let timer = null; // 保存定时器
    return function(...args) {
        if (timer) clearTimeout(timer); // 如果此前有定时器，清除
        timer = setTimeout(() => {
            func.apply(this, args); // 应用参数并执行函数
        }, delay);
    };
}

节流函数实现

function throttle(func, threshold) {
    let last;
    let timer;
    return function(...args) {
        const now = +new Date();
        if (last && now < last + threshold) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                func.apply(this, args);
            }, threshold);
        } else {
            last = now;
            func.apply(this, args);
        }
    };
}