JS的防抖和节流

1.防抖（Debouncing）

 

防抖的概念是当事件被触发后，等待一定时间间隔，如果在这个时间间隔内没有再次触发事件，那么执行相应的操作；如果在这个时间间隔内再次触发了事件，则重新等待一定时间。防抖常用于输入框输入验证、搜索框输入提示等场景，可以有效地减少不必要的请求或操作。

 

function antiShake(fn, time) {
    let timer = null;
    return args => {
        if (timer) clearTimeout(timer);
        timer = setTimeout(fn, time);
    };
}

1. 函数内部逻辑解析：

   • 在调用 antiShake 函数时，会返回一个新的函数，这个新函数接受参数 args。
   • 当调用这个返回的新函数时，首先会检查是否存在之前设置的 timer，如果存在，则清除之前的定时器。
   • 然后，通过 setTimeout 设置一个新的定时器，延迟时间为传入的 time，在延迟结束后执行传入的函数 fn。

2. 实际应用：

   • 这段代码实现了函数防抖（Debounce）的功能。即在短时间内多次调用该函数时，只有最后一次调用会生效，前面的调用都会被取消。
   • 通过利用定时器，在每次函数调用时先清除之前的定时器，再设置一个新的定时器，从而达到延迟执行函数的效果。

总的来说，这段代码实现了一个简单的函数防抖功能，适用于需要控制函数执行频率的场景。

2.节流（Throttling）

节流的概念是在一定时间间隔内只执行一次操作。无论事件触发频率多高，只要在指定的时间间隔内，只会执行一次函数。节流常用于页面滚动、拖拽等连续触发事件的场景，可以减少事件处理的频率，提升性能并优化用户体验。

function throttle(fn, time) {
    let timer = null;
    
    return (...args) => {
        if (!timer) {
            fn.apply(this, args);
            timer = setTimeout(() => {
                timer = null;
            }, time);
        }
    };
}

这段代码是一个节流函数的实现，用于限制一个函数在一定时间间隔内只能执行一次。解析代码逻辑：

1. throttle 函数接收两个参数：fn 表示需要节流的函数，time 表示时间间隔，即多长时间内只能执行一次函数。

2. 在函数内部定义了一个变量 timer，用于保存定时器的引用。初始值为 null。

3. 返回一个无参数箭头函数，这个函数是用来包裹需要进行节流的函数的闭包。

4. 在返回的箭头函数中，首先判断 timer 是否为 null。如果是 null，表示可以执行函数；否则，说明还未到时间间隔，不能执行函数。

5. 如果 timer 为 null，则通过 setTimeout 设置一个定时器，在指定的时间间隔后执行函数，并在定时器的回调函数中将 timer 置为 null，以便下次函数执行时能够再次进入判断条件。

6. 这样，通过控制定时器和 timer 的赋值操作，实现了对函数的节流效果，确保在设定的时间间隔内只执行一次函数。

总体来说，这段代码实现了一个简单的节流函数，能够有效地控制函数的执行频率，避免短时间内多次触发函数。

 

3.防抖和节流的区别

• 触发时机不同：防抖是在事件停止触发一段时间后执行操作，而节流是在一定时间间隔内执行一次操作。
• 操作执行方式不同：防抖只会执行一次操作，而节流会每隔一定时间间隔执行一次操作。

4.防抖和节流的使用场景

• 防抖适合处理连续的事件触发，比如输入框输入验证、搜索框输入提示等。
• 节流适合处理高频率的事件触发，比如页面滚动、拖拽等连续触发事件的处理。