前端函数防抖(debounce)和函数节流(throttle)

防抖&节流

在前端开发中一部分的用户行为会频繁的出发事件执行，对DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数防抖(debounce)和函数节流(throttle)就是为了解决类似的需求应运而生的。

 

• 防抖

函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。好像公交车司机会等全部人上车后才出站一样。

 

应用场景：实时搜索（keyup）、拖拽（mousemove）

 

var input = document.getElementsByTagName('input')[0];
var timer = null;
function ajax() {
    console.log(this.value);    
}
input.oninput = function () {
　　var _self = this,
       _arg = arguments;
　　clearTimeout(timer);
　　timer = setTimeout(function () {
　　　　ajax.apply(_self, _arg);
　　}, 1000);

}

 

封装防抖函数

function debounce(handler, delay) {
    var timer = null;
    return function () {
        var _self = this,
             _arg = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            handler.apply(_self, _arg);
        }, delay);
    }  
}

 

• 节流

函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下。

 

应用场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(mousedowm)

 

function throttle(handler, wait) {
    var lastTime = 0;
    return function () {
        var nowTime = new Date().getTime();
        if (nowTime - lastTime > wait) {
            handler.apply(this, arguments);
            lastTime = nowTime;
        }
    }
}