关于节流和防抖

在前端开发中会遇到一些频繁的事件触发，比如：

• window 的 resize、scroll
• mousedown、mousemove
• keyup、keydown
  这会导致绑定的函数频繁地执行。
  为了防止太过于频繁地执行绑定的函数，我们一般有两种解决方法：
• 1、debounce 防抖
• 2、throttle 节流

防抖

防抖的原理是：在事件触发n秒之后才执行函数，如果在n秒之内，又触发了这个事件，则以新的时间为准，n秒后再执行。总之，就是要触发事件n秒之内不再触发，才会执行。

function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

节流

节流的原理：如果持续触发事件，每隔n秒执行一次事件。
有两种方式实现节流：1、时间戳；2、定时器
时间戳：

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)
        }

    }
}