函数防抖与函数节流

函数防抖

• 函数调用n秒后才会执行，如果函数在n秒内被调用的话函数不执行，重新计算执行时间
• 事件结束后一段时间内才会执行，会有延迟性。
• 代码实现：

function debounce（method，delay）{
    var timer = null;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(context, args);
        }, delay)
    }
}
// 调用,每500毫秒调用执行一次fun
window.onresize = debounce(fun, 500)

函数节流

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

代码实现：

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;
        }
    }
}
// 调用，如果上一次距离这一次调用有500ms，就执行fun
window.onresize = throttle(fun, 500)

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