防抖与节流

淑子啦

于 2024-09-04 17:32:47 发布

阅读量629

点赞数 7

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/weixin_45392204/article/details/141899331

版权

1、防抖和节流概述

1-1、防抖(Debounce)

确保在指定的时间间隔内，无论连续触发了多少次事件，只有最后一次事件会在该间隔结束后执行。（触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。）

核心逻辑：

重置计时器：每次事件触发时，都会重置计时器。
执行时机：只有在用户停止触发事件指定时间间隔后，才会执行最后一次事件。
举例：
想象一台自动售货机，里面都是不同价格的商品，当你投入相应的硬币，会自动选择对应商品。但是为了避免还没投完就出商品，售货机设计不是投完立即掉出商品，而是有一个短暂的延迟，在这个延迟期间，如果你再次投入硬币，售货机重新进入延迟，只有当延迟期过后，之前投入硬币才会被处理。这样可以避免因为误操作或快速连续操作导致的错误购买。

// 创建一个防抖函数，它返回一个新的函数，该新函数在指定的 wait 时间后执行 func
function debounce(func, wait) {
    // 保存定时器的引用
    let timeout;
 
    // 返回的函数是用户实际调用的函数，它包含了防抖逻辑
    return function(...args) {
        // 保存当前的 this 上下文
        const context = this;
        console.log(context);  
 
        // 清除之前的定时器，如果存在
        if (timeout) clearTimeout(timeout);  
 
        // 设置一个新的定时器
        // 当指定的 wait 时间过后，将执行 func 函数
        // 并将当前的 this 上下文和参数传入
        timeout = setTimeout(function() {  
            // 执行原始函数，绑定正确的 this 上下文和参数
            func.apply(context, args);  
        }, wait);  
    };
}

当防抖函数被触发时，首先会检查是否已经存在一个timeout（即是否有一个定时器在运行）。
如果存在，表示之前有触发过防抖函数但还未执行func，此时使用clearTimeout清除之前的定时器。
然后，设置一个新的timeout，如果在wait指定的时间内再次触发防抖函数，之前的定时器会被清除并重新设置，这意味着func的执行会被不断推迟。
只有当指定的时间间隔wait内没有再次触发防抖函数时，timeout才会到达，此时会执行原始函数func，并且使用apply方法将存储的context和args传递给它。

1-2、节流(Throttle)

确保在指定的时间间隔内，无论触发了多少次事件，只有第一次事件会被执行，后续事件在这个间隔内都不会执行。（连续触发事件但是在 n 秒中只执行第一次触发函数）。

核心逻辑：

单次执行：在时间间隔内只执行一次事件处理函数。
忽略后续触发：在时间间隔内，后续的事件触发将被忽略。
举例：

想象一个繁忙的十字路口，交通信号灯每60秒变换一次。不论有多少车辆通过，信号灯都不会更快地变换。这就像节流，无论事件触发的频率多高，每个周期内只执行一次。

function throttle(func, limit) {
    let inThrottle = false;
 
    return function(...args) {
        const context = this; // 保存当前的 this 上下文
 
        if (!inThrottle) {
            // 执行传入的函数
            func.apply(context, args);
            inThrottle = true; // 标记为正在节流
 
            // 使用闭包和 setTimeout 来在指定的延迟后重置 inThrottle
            setTimeout(() => {
                inThrottle = false; // 重置节流状态
            }, limit);
        }
    };
}

func：需要被节流的函数。
limit：表示在指定的时间间隔后，func才能再次被执行的时间（以毫秒为单位）。
inThrottle：一个布尔值，用来标记func是否处于可执行状态。
context：保存当前的this上下文，确保在执行func时this指向正确。
args：使用扩展运算符...来收集所有参数，以便将它们传递给func。
setTimeout：在指定的limit时间后执行，将inThrottle重置为false，这样func就可以在下一次调用时被执行了。