简单版 JavaScript 防抖、节流的实现

1. 什么是防抖节流

用户在页面上进行窗口大小的调整、滚动页面或者在输入框搜索联想词等一系列操作时，都会频繁的触发事件处理函数；如果这时候又需要在事件处理函数里去异步获取数据或者进行DOM的操作等耗性能的操作时，容易导致页面卡顿等影响用户的体验；这时就可以通过防抖（debounce）和节流（throttle）函数来限制事件处理函数的调用频率，提升用户的体验。

• 最上面正常执行每一条竖线代表了每一次事件处理函数的调用，
• 中间是经过防抖函数处理后实际的调用情况，
• 最下面是经过节流函数处理后的调用情况；发现比最上面密集调用的情况要少了很多。

2. 实现防抖

// 函数防抖的实现
function debounce(fn, wait) {
    let timer = null;

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

        // 如果此时存在定时器的话，则取消之前的定时器重新记时
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        // 设置定时器，使事件间隔指定事件后执行
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, wait)
    }
}

// 这里调用fn时，很多fn函数都是滚动或者点击的回调函数，会提供Event对象进行处理，因此我们需要将原来的参数传入以及this进行绑定；因此分别赋值了变量context和args。

3. 实现节流

// 函数节流的实现;
function throttle(fn, delay) {
    let currTime = Date.now();

    return function () {
        let context = this,
            args = arguments,
            nowTime = Date.now();
        // 如果两次时间间隔超过了指定时间，则执行函数。
        if (nowTime - currTime >= delay) {
            currTime = Date.now();
            return fn.apply(context, args)

        }
    }
}