函数防抖和函数节流

什么是函数防抖和函数节流

函数防抖（debounce）：当事件被触发一段时间后再执行回调，如果在这段时间内事件又被触发，则重新计时

函数节流（throttle）：指定时间间隔内，若事件被多次触发，只会执行一次

函数防抖

原理

在事件触发时，开始计时，在规定的时间（delay）内，若再次触发事件，将上一次计时（timer）清空，然后重新开始计时。保证只有在规定时间内没有再次触发事件之后，再去执行这个事件。

代码

function debounce(fn, delay) {
    let timer = null;
    return function () {
        if (timer) {
            window.clearTimeout(timeId);
        } 
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    }
}

应用场景

适合多次事件一次响应的情况：

• 给按钮添加函数防抖用于防止表单多次提交
• 当用户在表单输入时，需要向后台发送HTTP请求时，使用函数防抖能有效减少请求次数

---

函数节流

原理

在事件触发之后，开始计时，在规定的时间（delay）内，若再次触发事件，不对此事件做任何处理。保证在规定时间内只执行一次事件

代码

function throttle(fn, delay) {
    let canUse = true;
    return function () {
        if (canUse) {
            fn.apply(this, arguments);
            canUse = false;
            setTimeout(() => {
                canUse = true;
            }, delay);
        } 
    }
}

应用场景

适合大量事件按时间做平均分配触发：

• DOM元素拖拽
• Canvas 画笔功能