Lodash 之 debounce

了解 Throttling（防抖） 和 Debouncing（节流）

参考：
The Difference Between Throttling and Debouncing
Debouncing and Throttling Explained Through Examples

应用场景：一个典型的应用场景是浏览器窗口中 scrolling 和 resizing，如设置了滚动的监听函数，在滚动 5000px的时候可能会触发 100 次以上的监听事件，如果监听事件做了大量计算或操作很多 DOM 元素，可能就会遇到性能问题。即时搜索也有同样的问题。

相同点：它们是为了解决性能问题而限制基于 DOM 事件的 JavaScript 的执行次数的两种方式，这是在事件和函数执行之间加的控制，因为 DOM 事件的触发频率是无法控制的。

不同点：Throttling 是限制一个函数能够被执行的最大时间间隔，保证了函数至少每隔 X 毫秒会被调用一次，如每隔 100ms 执行一次函数。Debouncing 是限制一个函数距上次调用达到一定时间间隔才会被再次调用，相当于连续的事件被分成了一组，只触发一次函数调用，如距上次调用达到 100ms 才会再次执行。

了解 requestAnimationFrame

window.requestAnimationFrame(callback) 方法告诉浏览器执行动画并请求浏览器在下一次重绘之前调用函数 callback 来更新动画，返回一个 long 整数的 ID，可以通过传此值到 window.cancelAnimationFrame() 来取消回调函数的执行，注意只是在下一次重绘时调用回调函数。

requestAnimationFrame 的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz 或 75Hz），requestAnimationFrame 的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新，这就节省了CPU、GPU和电力。注意 requestAnimationFrame 是在主线程上完成，这也意味着，如果主线程非常繁忙，requestAnimationFrame 的动画效果会大打折扣。

requestAnimationFrame 是限制函数执行次数的另一种方式，可以被认为是 _.throttle(dosomething, 16)，但是是高保真的，会针对不同设备本身的性能而更精确一些，浏览器内部决定渲染的最佳时机，它可以作为 throttle 的替换。

如果浏览器标签不是激活状态，就不会被执行，虽然对滚动、鼠标或键盘事件没有影响。还有需要考虑浏览器兼容性，node.js 中也没有提供该 API。

最佳实践：使用 requestAnimationFrame 进行重新绘制、计算元素位置或直接改变属性的操作，使用 _.debounce 或 _.throttle 进行 Ajax 请求或添加、移除 class（可以触发 CSS 动画），这时可以设置一个低一些的频率，如 200ms。

lodash 之 debounce 源码

这里不再描述 throttle 了，其实 throttle 就是设置了 maxWait 的 debounce，lodash 源码中对 throttle 的实现就是调用了 wait 和 maxWait 相等的 debounce。

/*
 * root 为全局变量，浏览器下为 window，node.js 下为 global
 * isObject 函数判断传入参数是否为一个对象
 * 创建一个 debounced 函数并返回，该函数延迟 func 在距离上一次调用达到 wait 时间之后再执行，如果在这期间内又调用了函数则将取消前一次并重新计* 算时间
 * options.leading 函数在每个等待延迟的开始被调用
 * options.trailing 函数在每个等待延迟的结束被调用
 * options.maxWait 函数被调用的最大等待时间，实现 throttle 效果，保证大于一定时间后一定能执行
 * 如果 leading 和 trailing 都设置为 true 了，只有函数在 wait 时间内被执行一次以上才会执行 trailing
 */
function debounce(func, wait, options) {
    // 变量初始化
    let lastArgs,
        lastThis,
        maxWait,
        result,
        timerId,
        lastCallTime;
    let lastInvokeTime = 0;
    let leading = false;
    let maxing = false;
    let trailing = true;

    // 如果 wait = NaN 并且当前是浏览器环境 requestAnimationFrame 存在时，返回 true
    const userRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function');

    // 传入参数的验证
    if (typeof func != 'function') {
        throw new TypeError('Expected a function');
    }
    wait = +wait || 0; // 将传入的 wait 转为数字，如果没有传入值默认赋值为 0
    if (isObject(options)) {
        leading = !!options.leading;
        maxing = 'maxWait' in options;
        // maxWait 为设置的 maxWait 值和 wait 值中最大的，因为如果 maxWait 小于 wait，debounce 就失效了，相当于只有 throttle 了
        maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait;
        trailing = 'trailing' in options ? !!options.trailing : trailing;
    }

    function invokeFunc(time) {
        // 进入 debounced 函数时对 lastArgs、lastThis 进行的赋值，在这里执行完函数后，对 lastArgs、lastThis 进行了重置
        // 个人认为这样做的原因，是保证通过计时的方式执行函数最多只能执行一次
        const args = lastArgs;
        const thisArg = lastThis;
        lastArgs = lastThis = undefined;
        lastInvokeTime = time;
        result = func.apply(thisArg, args);
        return result;
    }

    function startTimer(pendingFunc, wait) {
        if (userRAF) {
            return root.requestAnimationFrame(pendingFunc);
        }
        return setTimeout(pendingFunc, wait);
    }

    function cancelTimer(id) {
        if (userRAF) {
            return root.cancelAnimationFrame(id);
        }
        clearTimeout(id);
    }

    function leadingEdge(time) {
        // TODO 不明白为什么这里需要更新 lastInvokeTime，进入 leadingEdge 函数不一定会真的触发函数的执行
        lastInvokeTime = time;
        // 为 trailingEdge 触发函数调用设置定时器
        timerId = startTimer(timerExpired, wait);
        // 如果 leading 为 true，会触发函数执行，否则返回上一次执行结果
        return leading ? invokeFunc(time) : result;
    }

    // 主要作用就是触发 trailingEdge
    function timerExpired() {
        const time = Date.now();
        // 在 trailingEdge 且时间符合条件时，调用 trailingEdge函数，否则重启定时器
        if (shouldInvoke(time)) {
            return trailingEdge(time);
        }
        // 重启定时器，保证下一次时延的末尾触发
        timerId = startTimer(timerExpired, remainingWait(time));
    }

    function remainingWait(time) {
        // 距离上次函数被调用的时间
        const timeSinceLastCall = time - lastCallTime;
        // 距离上次函数被执行的时间
        const timeSinceLastInvoke = time - lastInvokeTime;
        // wait - timeSinceLastCall 为距离下一次 trailing 的位置
        const timeWaiting = wait - timeSinceLastCall;

        // maxWait - timeSinceLastInvoke 为距离下一次 maxing 的位置
        // 有maxing：比较出下一次 maxing 和下一次 trailing 的最小值，作为下一次函数要执行的时间
        // 无maxing：在下一次 trailing 时执行 timerExpired
        return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
    }

    function trailingEdge(time) {
        timerId = undefined;

        // 有 lastArgs 才执行，意味着只有 func 已经被 debounced 过一次，也就是被调用过一次，以后才会在 trailingEdge 执行
        if (trailing && lastArgs) {
            return invokeFunc(time);
        }
        // 每次 trailingEdge 都会清除 lastArgs 和 lastThis，目的是避免最后一次函数被执行了两次
        // 举个例子：最后一次函数执行的时候，可能恰巧是前一次的 trailing edge，函数被调用，而这个函数又需要在自己时延的 trailing edge 触发，导致触发多次
        lastArgs = lastThis = undefined;
        return result;
    }

    function shouldInvoke(time) {
        const timeSinceLastCall = time - lastCallTime;
        const timeSinceLastInvoke = time - lastInvokeTime;

        return (
            lastCallTime === undefined                    // 第一次调用
            || (timeSinceLastCall >= wait)                // 距离上次被调用已经超过 wait
            || (timeSinceLastCall < 0)                    //系统时间倒退
            || (maxing && timeSinceLastInvoke >= maxWait) //超过最大等待时间
        );
    }

    // 取消函数延迟执行
    function cancel() {
        if (timerId !== undefined) {
            cancelTimer(timerId);
        }
        lastInvokeTime = 0;
        lastArgs = lastCallTime = lastThis = timerId = undefined;
    }

    // 触发函数立即执行
    function flush() {
        // 如果前面没有定时任务在执行，也就是没有前面没有调用过函数，返回最后一次执行的结果，否则才会触发一次函数执行
        return timerId === undefined ? result : trailingEdge(Date.now());
    }

    // 检查当前是否在计时中
    function pending() {
        return timerId !== undefined;
    }

    // 返回的控制函数真正调用频率的函数
    function debounced(...args) {
        const time = Date.now();
        const isInvoking = shouldInvoke(time);

        lastArgs = args;
        lastThis = this;
        // 更新上次函数调用时间
        lastCallTime = time;
        // 无 timerId 的情况有两种：1.首次调用 2.trailingEdge执行过函数
        if (isInvoking) {
            if (timerId === undefined) {
                return leadingEdge(lastCallTime);
            }
            if (maxing) {
                // Handle invocations in a tight loop.
                timerId = startTimer(timerExpired, wait);
                return invokeFunc(lastCallTime);
            }
        }
        // 负责一种 case：trailing 为 true 的情况下，在前一个 wait 的 trailingEdge 已经执行了函数；
        // 而这次函数被调用时 shouldInvoke 不满足条件，因此要设置定时器，在本次的 trailingEdge 保证函数被执行
        if (timerId === undefined) {
            timerId = startTimer(timerExpired, wait);
        }
        return result;
    }

    debounced.cancel = cancel;
    debounced.flush = flush;
    debounced.pending = pending;
    return debounced;
}