JavaScript的防抖与节流

函数防抖

函数防抖（debounce）：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行！

function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this; // 将 this 指向正确的对象。
        var args = arguments; // 让 func 有event对象
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

// test
function test(e) {
    console.log(e);
};
var app = document.getElementById('app');
app.onmousemove = debounce(test,1000)

节流函数

如果你持续触发事件，每隔一段时间，只执行一次事件。

节流有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

使用时间戳

当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

使用定时器

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(func, wait) {
    var timeout;
    var previous = 0;

    return function() {
        context = this;
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

比较两个方法

1.第一种事件会立刻执行，第二种事件会在 n 秒后第一次执行;
2.第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件