背景

防抖函数在各个互联网大厂的面试中，出现的频率是非常高的，本人在面试某鹅厂的时候也正好遇见过。

那么何为防抖呢？

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

举个简单的例子，当用户连续多次点击某个按钮时，而这个按钮每点击一次就会发送一个请求。那么当用户连续多次点击按钮的时候，那岂不是也需要多次发送请求，直接产生的后果就是浪费资源，性能降低，增加服务器压力。那么如何解决这个问题呢？如果能够在一定时间内，只能发送一次请求就可以解决这个问题了。

防抖函数

下面就是我们平时最常见的防抖函数了，非常简单，主要使用了setTimeout定时器，以及使用闭包，用于对防抖函数debounce中的timeout参数持续访问。

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行(前沿触发)，false 表非立即执行（后沿触发）
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout); // timeout是定时器ID，只有初始化状态下第一次触发的时候才不会执行；后续在周期内触发db函数会清除定时器，避免在周期内初始化timeout导致事件函数被执行
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null; // 如果周期内db函数未触发，则重新初始化timeout
            }, wait)
            if (callNow) func.Apply(context, args) // 初始化状态下，立即执行事件函数
        }
        else {
            timeout = setTimeout(function(){ // 在周期内db函数被触发会更新定时器，延迟事件函数的执行
                func.apply(context, args)
            }, wait);
        }
    }
}

使用场景

防抖函数多使用于如下的一些频繁触发的事件：

1. 输入框的 keyup / keydown
2. 调整窗口大小的 resize
3. 页面滚动的 scroll
4. 鼠标滑动的 mousedown / mousemove