JS 防抖和节流

JS 防抖和节流

防抖（debounce）和节流（throttle）都是用来控制函数执行频率的技术。

防抖

概述

防抖：指的是在函数被触发 n 毫秒之后运行，如果在这 n 毫秒内有其他的调用（即触发），则会重新计算函数的执行时间。防抖是在最后一次触发后的等待时间后执行函数。

场景

适用于输入框、滚动事件等，避免因频繁触发引起的函数重复执行和不必要的网络请求。

实现

防抖：可以通过 setTimeout 和 clearTimeout 实现，即设置定时器，等待一段时间 beforeTime 后才触发事件处理函数。如果在这段时间内再次触发了事件，则清除之前的定时器并重新设置定时器。只有在定时器到期后没有再次触发事件，事件处理函数才会被执行。

let input = document.querySelector("input");
let btn = document.querySelector("#btn");
const debounce = (() => {
    let timer = null;
    return (callback, time = 800) => {
        timer && clearTimeout(timer);
        timer = setTimeout(callback, time);
    };
})();

btn.addEventListener("click", function () {
    debounce(() => {
        console.log(input.value);
    }, 2000);
});

节流

概述

节流：指的是在限制被触发的频率，在 n 毫秒内只运行一次函数，而不是在调用过程中无限制地调用它。节流是在固定时间间隔内执行函数

场景

• 防止按钮频繁点击。
• 在页面无限加载场景下，每隔一段事件只能请求一次。

实现

节流：可以通过记录节流函数上一次执行时间的方式实现。在设定的时间间隔内，如果函数多次触发，则只执行一次函数。当第一次触发事件时，记录当前时间戳，之后每次触发事件都先检查当前时间和记录的时间间隔是否超过设定的时间间隔，如果超过，则执行事件处理函数并更新时间戳，否则忽略。

let input = document.querySelector("input");
let btn = document.querySelector("#btn");
const throttle = (() => {
    let last = 0;
    return (callback, time = 800) => {
        let now = +new Date();
        if (now - last > time) {
            callback();
            last = now;
        }
    };
})();

btn.addEventListener("click", function () {
    if (input.value == "") {
        return;
    }
    throttle(() => {
        console.log(input.value);
    }, 2000);
});