你知道什么是防抖和节流吗？

目录

1 先举个例子 

2 使用场景

3 代码实现

3.1 防抖的实现

3.2 节流的实现

---

1 先举个例子 

防抖，更像是坐电梯，早上眼看9点了，都着急坐电梯上去打卡，但眼看电梯要关了，进来一个人，等几秒，这几秒钟进来人他不关，几秒后他就关。眼看电梯要上去了，要关了，又有人按了一下，又等几秒。要不老有人着急按下那个“—><—”键呢。

所以防抖就是，遇到重复事件，就往后重新计时；

节流更像是坐火车，火车是有时刻表的，哪怕车站人来人往，不断有人要来坐车，从北京去上海或者去天津，我就是15分钟一趟，15分钟就车就开走，乘客们抓紧了啊。

所以节流就是，遇到重复执行，爱重复不重复，15分钟后准时来一次。

2 使用场景

防抖的使用场景：

• 比如手机号，邮箱，或者用户输入一些内容，输入的这些信息需要验证库里是否存在这种操作，肯定是希望用户输完去验证的；
• 比如用户调整窗口大小，那个resize事件肯定是一直在执行，所以需要执行完成后再计算大小，做一些操作，防止频繁渲染；

节流的使用场景：

• 节流是说固定时间执行一次，比如下拉加载，也不能一下拉就重新请求数据，下拉完了就请求肯定不行，万一他隔3秒下拉一次呢，所以就是直接节流，限定长一些时间一次，就像发车时刻表一样；

3 代码实现

3.1 防抖的实现

function debounce(func, delay) {
    let timeoutId;
    return function() {
        const context = this;
        const args = arguments;
        
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            func.apply(context, args);
        }, delay);
    };
}

这个 debounce 函数接受两个参数：

• func: 要延迟执行的函数。
• delay: 延迟时间（以毫秒为单位）。

它返回一个新函数，该函数在被调用时会启动一个定时器，在延迟时间后执行 func 函数。如果在延迟时间内该函数被再次调用，则会清除之前的定时器，并重新启动一个新的定时器。

示例用法：

// 假设有一个函数 handleInput，我们希望延迟执行它
function handleInput() {
    console.log("Input handled");
}

// 创建一个防抖函数
const debounceHandleInput = debounce(handleInput, 300); // 300 毫秒延迟

// 用于输入框输入事件
inputBox.addEventListener('input', debounceHandleInput);

3.2 节流的实现

function throttle(func, delay) {
    let lastExecutedTime = 0;
    return function() {
        const currentTime = Date.now();
        if (currentTime - lastExecutedTime > delay) {
            func.apply(this, arguments);
            lastExecutedTime = currentTime;
        }
    };
}

这个 throttle 函数接受两个参数：

• func: 要限制执行频率的函数。
• delay: 限制的时间间隔（以毫秒为单位）。

它返回一个新函数，该函数在被调用时会检查上一次执行 func 函数的时间，如果距离上一次执行的时间超过了 delay，则再次执行 func 函数，并更新上一次执行的时间。

示例用法：

// 假设有一个函数 handleScroll，我们希望限制它的执行频率
function handleScroll() {
    console.log("Scroll event handled");
}

// 创建一个节流函数
const throttleHandleScroll = throttle(handleScroll, 300); // 300 毫秒限制

// 监听滚动事件
window.addEventListener('scroll', throttleHandleScroll);