怎么理解 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);
        }
    };
}

防抖和节流在现代Web开发中极其重要。正确运用这两种技术不仅可以提高应用的响应速度和性能，还能显著提升用户体验。希望通过本文的介绍，你能深刻理解防抖和节流的概念，以及如何在实际项目中合理应用它们。

相关问答FAQs：

Q：什么是JavaScript中的防抖和节流？

A：防抖和节流都是JavaScript中常用的优化技术，用于在处理频繁触发的事件时提高性能。防抖意味着将多次触发的事件合并成一次执行，而节流则是将多次触发的事件按照一定的间隔执行。

Q：防抖和节流的应用场景有哪些？

A：防抖在处理输入框实时搜索等场景非常有用，当用户输入时，可以通过防抖将输入内容合并成一次搜索请求，减少请求次数。节流则适用于处理页面滚动、窗口调整等频繁触发的事件，通过设置一定的间隔时间来降低事件触发的频率。

Q：如何在JavaScript中实现防抖和节流？

A：实现防抖可以通过设置一个定时器，在事件触发后延迟一定时间再执行相应的操作。如果在这个延迟时间内再次触发了同样的事件，则取消之前的定时器重新设定一个新的定时器。实现节流则可以使用setTimeout函数结合时间戳，记录上一次执行的时间，每次触发事件时先判断当前时间与上一次执行时间的差值是否大于设定的间隔时间，如果大于则执行相应操作并更新上一次执行时间。