JavaScript之函数防抖与节流

函数防抖

含义：函数防抖是在函数需要频繁触发情况时，只要有足够空闲的时间，才执行一次。类似于公交司机会等人都上车了才出站一样。

场景：

1、实时搜索

2、拖拽

代码：

/*
* debounce: 函数防抖
* hander：调用函数
* delay: 延迟时间
*/
function debounce(hander, delay){
    var timer = null;
    return function(){
       var _self = this, _arg = arguments;
        clearTimeout(timer)
        timer = setTimeout(function(){
            hander.apply(_self, _arg);
        }, delay);
    }
}

函数节流

含义：函数节流就是预定一个函数只有在大于等于执行周期时才会执行的，周期内不执行，类似于水滴攒到一定的重量才会落下一样。

场景：

1、窗口调整

 2、页面滚动

3、 抢购疯狂点击（mousedown）

代码：

/*
* throttle: 函数节流
* hander: 事件处理函数
* wait: 间隔时间
*/
function throttle(hander, wait){
    var lastTime = 0;
    return  function(e){
        var nowTime = new Date().getTime()
        if (nowTime - lastTime > wait) {
            hander.apply(this, arguments);
            lastTime = nowTime;
        }
    }
}
setInterval(throttle(function(){
console.log('Hello, world!');
}, 300));

应用：