本文来自我的博客，迎接人人去GitHub上star我的博客

本文从防抖和撙节动身，剖析它们的特征，并拓展一种特别的撙节体式格局requestAnimationFrame，末了对lodash中的debounce源码举行剖析

防抖和撙节是前端开辟中常常运用的一种优化手腕，它们都被用来掌握一段时候内要领实行的次数，可认为我们节约大批不必要的开支

防抖(debounce)

当我们须要实时获知窗口大小变化时，我们会给window绑定一个resize函数，像下面如许：

window.addEventListener('resize', () => {
    console.log('resize')
});

我们会发明，即使是极小的缩放操纵，也会打印数十次resize，也就是说，假如我们须要在onresize函数中搞一些小行动，也会反复实行几十次。但实际上，我们只体贴鼠标松开，窗口住手变化的那一次resize，这时刻，就能够运用debounce优化这个历程：

const handleResize = debounce(() => {
    console.log('resize');
}, 500);
window.addEventListener('resize', handleResize);

运转上面的代码(你得有现成的debounce函数)，在住手缩放操纵500ms后，默许用户无继承操纵了，才会打印resize

这就是防抖的功用，它把一组一连的挪用变为了一个，最大水平地优化了效力

再举一个防抖的罕见场景：

搜刮栏常常会依据我们的输入，向后端请求，猎取搜刮候选项，显现在搜刮栏下方。假如我们不运用防抖，在输入“debounce”时前端会顺次向后端请求”d”、”de”、”deb”…”debounce”的搜刮候选项，在用户输入很快的状况下，这些请求是无意义的，能够运用防抖优化

视察上面这两个例子，我们发明，防抖异常适于只体贴效果，不体贴历程怎样的状况，它能很好地将大批一连事宜转为单个我们须要的事宜

为了更好邃晓，下面供应了最简朴的debounce完成：返回一个function，第一次实行这个function会启动一个定时器，下一次实行会消灭上一次的定时器并重起一个定时器，直到这个function不再被挪用，定时器胜利跑完，实行回调函数

const debounce = function(func, wait) {
    let timer;
    return function() {
        !!timer && clearTimeout(timer);
        timer = setTimeout(func, wait);
    };
};

那假如我们不仅体贴效果，同时也体贴历程呢？

撙节(throttle)

撙节让指定函数在划定的时候里实行次数不会凌驾一次，也就是说，在一连高频实行中，行动会被按期实行。撙节的重要目标是将底本操纵的频次下降

实例：

我们模仿一个可无穷转动的feed流

html：

<div id="wrapper">
    <div class="feed"></div>
    <div class="feed"></div>
    <div class="feed"></div>
    <div class="feed"></div>
    <div class="feed"></div>
</div>

css：

#wrapper {
    height: 500px;
    overflow: auto;
}
.feed {
    height: 200px;
    background: #ededed;
    margin: 20px;
}

js:

const wrapper = document.getElementById("wrapper");
const loadContent = () => {
    const {
        scrollHeight,
        clientHeight,
        scrollTop
    } = wrapper;
    const heightFromBottom = scrollHeight - scrollTop - clientHeight;
    if (heightFromBottom < 200) {
        const wrapperCopy = wrapper.cloneNode(true);
        const children = [].slice.call(wrapperCopy.children);
        children.forEach(item => {
            wrapper.appendChild(item);
        })
    }
}
const handleScroll = throttle(loadContent, 200);
wrapper.addEventListener("scroll", handleScroll);

能够看到，在这个例子中，我们须要不停地猎取转动条间隔底部的高度，以推断是不是须要增添新的内容。我们晓得，srcoll一样也是种会高频触发的事宜，我们须要削减它有用触发的次数。假如运用的是防抖，那末得等我们住手转动以后一段时候才会加载新的内容，没有那种无穷转动的流通感。这时刻，我们就能够运用撙节，将事宜有用触发的频次下降的同时给用户流通的浏览体验。在这个例子中，我们指定throttle的wait值为200ms，也就是说，假如你一直在转动页面，loadCotent函数也只会每200ms实行一次

一样，这里有throttle最简朴的完成，固然，这类完成很粗拙，有不少缺点（比方没有斟酌末了一次实行），只供开端邃晓运用：

const throttle = function (func, wait) {
    let lastTime;
    return function () {
        const curTime = Date.now();
        if (!lastTime || curTime - lastTime >= wait) {
            lastTime = curTime;
            return func();
        }
    }
}

requestAnimationFrame(rAF)

rAF在肯定水平上和throttle(func,16)的作用类似，但它是浏览器自带的api，所以，它比throttle函数实行得越发腻滑。挪用window.requestAnimationFrame()，浏览器会在下次革新的时刻实行指定回调函数。一般，屏幕的革新频次是60hz，所以，这个函数也就是约莫16.7ms实行一次。假如你想让你的动画越发腻滑，用rAF就再好不过了，因为它是随着屏幕的革新频次来的

rAF的写法与debounce和throttle差别，假如你想用它绘制动画，须要不停地在回调函数里挪用本身，详细写法能够参考mdn

rAF支撑ie10及以上浏览器，不过因为是浏览器自带的api，我们也就没法在node中运用它了

总结

debounce将一组事宜的实行转为末了一个事宜的实行，假如你只关注效果，debounce再合适不过

假如你同时关注历程，能够运用throttle，它能够用来下降高频事宜的实行频次

假如你的代码是在浏览器上运转，不斟酌兼容ie10，而且请求页面上的变化尽量的腻滑，能够运用rAF

参考：https://css-tricks.com/debouncing-throttling-explained-examples/

附：lodash源码剖析

lodash的debounce功用非常壮大，集debounce、throttle和rAF于一身，所以我特地研读一下，下面是我的剖析（我删去了一些不重要的代码，比方debounced的cancel要领）：

function debounce(func, wait, options) {
    /**
     * lastCallTime是上一次实行debounced函数的时候
     * lastInvokeTime是上一次挪用func的时候
     */
    let lastArgs, lastThis, maxWait, result, timerId, lastCallTime;

    let lastInvokeTime = 0;
    let leading = false;
    let maxing = false;
    let trailing = true;

    /**
     * 假如没设置wait且raf可用 则默许运用raf
     */
    const useRAF =
        !wait && wait !== 0 && typeof root.requestAnimationFrame === "function";

    if (typeof func !== "function") {
        throw new TypeError("Expected a function");
    }
    wait = +wait || 0;
    if (isObject(options)) {
        leading = !!options.leading;
        maxing = "maxWait" in options;
        maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait;
        trailing = "trailing" in options ? !!options.trailing : trailing;
    }

    /**
     * 实行func
     */
    function invokeFunc(time) {
        const args = lastArgs;
        const thisArg = lastThis;

        lastArgs = lastThis = undefined;
        /**
         * 更新lastInvokeTime
         */
        lastInvokeTime = time;
        result = func.apply(thisArg, args);
        return result;
    }

    /**
     * 挪用定时器
     */
    function startTimer(pendingFunc, wait) {
        if (useRAF) {
            root.cancelAnimationFrame(timerId);
            return root.requestAnimationFrame(pendingFunc);
        }
        return setTimeout(pendingFunc, wait);
    }

    /**
     * 在每轮debounce最先挪用
     */
    function leadingEdge(time) {
        lastInvokeTime = time;
        timerId = startTimer(timerExpired, wait);
        return leading ? invokeFunc(time) : result;
    }

    /**
     * 盘算剩余时候
     * 1是 wait 减去 间隔上次挪用debounced时候（lastCallTime）
     * 2是 maxWait 减去 间隔上次挪用func时候（lastInvokeTime）
     * 1和2取最小值
     */
    function remainingWait(time) {
        const timeSinceLastCall = time - lastCallTime;
        const timeSinceLastInvoke = time - lastInvokeTime;
        const timeWaiting = wait - timeSinceLastCall;

        return maxing
            ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
            : timeWaiting;
    }

    /**
     * 推断是不是须要实行
     */
    function shouldInvoke(time) {
        const timeSinceLastCall = time - lastCallTime;
        const timeSinceLastInvoke = time - lastInvokeTime;
        /**
         * 4种状况返回true，不然返回false
         * 1.第一次挪用
         * 2.间隔上次挪用debounced时候（lastCallTime）>=wait
         * 3.体系时候倒退
         * 4.设置了maxWait，间隔上次挪用func时候（lastInvokeTime）>=maxWait
         */
        return (
            lastCallTime === undefined ||
            timeSinceLastCall >= wait ||
            timeSinceLastCall < 0 ||
            (maxing && timeSinceLastInvoke >= maxWait)
        );
    }

    /**
     * 经由过程shouldInvoke函数推断是不是实行
     * 实行：挪用trailingEdge函数
     * 不实行：挪用startTimer函数重新最先timer，wait值经由过程remainingWait函数盘算
     */
    function timerExpired() {
        const time = Date.now();
        if (shouldInvoke(time)) {
            return trailingEdge(time);
        }
        // Restart the timer.
        timerId = startTimer(timerExpired, remainingWait(time));
    }

    /**
     * 在每轮debounce终了挪用
     */
    function trailingEdge(time) {
        timerId = undefined;

        /**
         * trailing为true且lastArgs不为undefined时挪用
         */
        if (trailing && lastArgs) {
            return invokeFunc(time);
        }
        lastArgs = lastThis = undefined;
        return result;
    }

    function debounced(...args) {
        const time = Date.now();
        const isInvoking = shouldInvoke(time);

        lastArgs = args;
        lastThis = this;
        /**
         * 更新lastCallTime
         */
        lastCallTime = time;

        if (isInvoking) {
            /**
             * 第一次挪用
             */
            if (timerId === undefined) {
                return leadingEdge(lastCallTime);
            }
            /**
             * 【注1】
             */
            if (maxing) {
                timerId = startTimer(timerExpired, wait);
                return invokeFunc(lastCallTime);
            }
        }
        /**
         * 【注2】
         */
        if (timerId === undefined) {
            timerId = startTimer(timerExpired, wait);
        }
        return result;
    }
    return debounced;
}

引荐是从返回的要领debounced最先，顺着实行递次浏览，邃晓起来更轻松

【注1】一最先我没看邃晓if(maxing)内里这段代码的作用，按理说，是不会实行这段代码的，厥后我去lodash的仓库里看了test文件，发明对这段代码，特地有一个case对其测试。我剥除了一些代码，并修改了测试用例以便展现，以下：

var limit = 320,
    withCount = 0

var withMaxWait = debounce(function () {
    console.log('invoke');
    withCount++;
}, 64, {
    'maxWait': 128
});

var start = +new Date;
while ((new Date - start) < limit) {
    withMaxWait();
}

实行代码，打印了3次invoke；我又将if(maxing){}这段代码解释，再实行代码，效果只打印了1次。连系源码的英文解释Handle invocations in a tight loop，我们不难邃晓，底本抱负的实行递次是withMaxWait->timer->withMaxWait->timer这类交替举行，但因为setTimeout需守候主线程的代码实行终了，所以这类短时候疾速挪用就会致使withMaxWait->withMaxWait->timer->timer，从第二个timer最先，因为lastArgs被置为undefined，也就不会再挪用invokeFunc函数，所以只会打印一次invoke。

同时，因为每次实行invokeFunc时都会将lastArgs置为undefined，在实行trailingEdge时会对lastArgs举行推断，确保不会涌现实行了if(maxing){}中的invokeFunc函数又实行了timer的invokeFunc函数

这段代码保证了设置maxWait参数后的正确性和时效性

【注2】实行过一次trailingEdge后，再实行debounced函数，可能会碰到shouldInvoke返回false的状况，需零丁处置惩罚

【注3】关于lodash的debounce来讲，throttle是一种leading为true且maxWait即是wait的特别debounce