js性能優化之---防抖函數

使用場景

• input的時時觸發搜索功能
• scroll事件的滾動條位置的監測
• resize事件監聽窗口變化等

舉個栗子（input框時時觸發搜索功能）

普通未防抖款

var textElement = document.getElementById('test');
var timer;
textElement.oninput = function(){
    console.log('造吧，木有防抖效果');
}

普通防抖款

var textElement = document.getElementById('test');
var timer;
textElement.oninput = function(){
    console.log('oninput事件');
    if(timer){
        clearTimeout(timer);
    }
    timer = setTimeout(function(){
        timer = null;
        console.log('添加防抖效果以後的操做')
    },2000)
}

封裝防抖款

function antishake(fn,delay){
    return function(){
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn();
        },delay);
    }
}

function business(){
    console.log('添加防抖效果以後的操做')
}

textElement.oninput = function(){
    console.log('oninput事件')
    antishake(business,800)();
}