函数去抖(debounce)

在日常的开发过程中，会有这样的场景，事件被频繁的触发，比如说我们的在输入的时候监控keypress事件，在页面滚动的时候监控页面的滚动事件。比如我们监控页面的resize事件，拉动窗口改变大小的时候，resize事件被频繁的执行，事件处理函数简单的话还好，但是如果是复杂的dom操作，可能会导致整个UI卡顿设置浏览器奔溃，而我们往往的结果就是事件结束后处理函数执行一次就行了。于是我们可以通过函数的去抖来处理。

函数调用n秒后才会执行，如果函数在n秒内被调用的话则函数不执行，重新计算执行时间

function dbbounce(method,delay){
    var timer = null;
    return function(){
        var context = this,args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(context,args);
        },delay);
    }
}

var n = 0;

function resizehandler(){
    console.log(++n);
}

window.onresize = dbbounce(resizehandler,500);

函数去抖：即事件结束后的一段时间内才会执行，会有一个延迟性

函数节流(throttle)

函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期

function throttle(method,duration){
    var begin = new Date();
    return function(){
        var context = this,
            args = arguments,
            current = new Date();
        if(current-begin>=duration){
            method.apply(context,args);
            begin = current;
        }   
    }
}

var n = 0;

function resizehandler(){
    console.log(++n);
}
window.onresize = throttle(resizehandler,500);

需要注意的一点：函数的节流和函数的去抖都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。