节流和防抖

节流和防抖

防抖

• 防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

使用场景

• search搜索联想，用户在不断输入值时，使用防抖减少请求次数。

    function debounce(fn, delay) {

        var delay = delay || 200;
        var timer;
        return function() {
            var th = this;
            var args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                timer = null;
                fn.apply(th, args);
            }, delay);
        };
    }

节流

• throttle 的中心思想在于：在某段时间内，不管你触发了多少次回调，我都只认第一次，并在计时结束时给予响应。

• 每当用户触发了一次scroll事件，我们就为这个触发操作开启计时器。一段时间内，后续所有的scroll事件都会被当作“一辆车的乘客”——它们无法触发新的scroll回调。直到“一段时间”到了，第一次触发的scroll事件对应的回调才会执行，而“一段时间内”触发的后续的scroll回调都会被节流阀无视掉。

使用场景

• 鼠标点击事件，mousedown(单位时间内只触发一次)

• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

function throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function() {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function() {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}