摘要：此時(shí)需要采用防抖和節(jié)流的方式來(lái)減少調(diào)用頻率，同時(shí)不影響原來(lái)效果。函數(shù)防抖當(dāng)持續(xù)觸發(fā)事件時(shí)，一段時(shí)間段內(nèi)沒(méi)有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間到來(lái)之前就觸發(fā)了事件，延時(shí)重新開(kāi)始。

實(shí)際工作中，通過(guò)監(jiān)聽(tīng)某些事件，如scroll事件檢測(cè)滾動(dòng)位置，根據(jù)滾動(dòng)位置顯示返回頂部按鈕；如resize事件，對(duì)某些自適應(yīng)頁(yè)面調(diào)整DOM的渲染；如keyup事件，監(jiān)聽(tīng)文字輸入并調(diào)用接口進(jìn)行模糊匹配等等，這些事件處理函數(shù)調(diào)用的頻率如果太高，會(huì)加重瀏覽器的負(fù)擔(dān)，減弱性能，造成用戶體驗(yàn)不好。此時(shí)需要采用debounce（防抖）和throttle（節(jié)流）的方式來(lái)減少調(diào)用頻率，同時(shí)不影響原來(lái)效果。

當(dāng)持續(xù)觸發(fā)事件時(shí)，一段時(shí)間段內(nèi)沒(méi)有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間到來(lái)之前就觸發(fā)了事件，延時(shí)重新開(kāi)始。
函數(shù)防抖的應(yīng)用場(chǎng)景，最常見(jiàn)的就是用戶注冊(cè)時(shí)候的手機(jī)號(hào)碼驗(yàn)證和郵箱驗(yàn)證了。只有等用戶輸入完畢后，前端才需要檢查格式是否正確，如果不正確，再?gòu)棾鎏崾菊Z(yǔ)。

上圖中，持續(xù)觸發(fā)scroll事件時(shí)，并不執(zhí)行handle函數(shù)，當(dāng)1000毫秒內(nèi)沒(méi)有觸發(fā)scroll事件時(shí)，才會(huì)延時(shí)觸發(fā)scroll事件；
上面原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來(lái)之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。
代碼如下：

// 函數(shù)防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未執(zhí)行的代碼，重置回初始化狀態(tài)

    timer = setTimeout(function(){
        console.log("函數(shù)防抖");
    }, 1000);
};

防抖函數(shù)的封裝使用

/**
 * 防抖函數(shù)
 * @param method 事件觸發(fā)的操作
 * @param delay 多少毫秒內(nèi)連續(xù)觸發(fā)事件，不會(huì)執(zhí)行
 * @returns {Function}
 */
function debounce(method,delay) {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(self,args);
        },delay);
    }
}
window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log("滾動(dòng)條位置：" + scrollTop);
},1000)

另一種寫法

// 防抖
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 處理函數(shù)
function handle() {    
    console.log("函數(shù)防抖"); 
}
// 滾動(dòng)事件
window.addEventListener("scroll", debounce(handle, 1000));

當(dāng)持續(xù)觸發(fā)事件時(shí)，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)。
函數(shù)節(jié)流應(yīng)用的實(shí)際場(chǎng)景，多數(shù)在監(jiān)聽(tīng)頁(yè)面元素滾動(dòng)事件的時(shí)候會(huì)用到。

上圖中，持續(xù)觸發(fā)scroll事件時(shí)，并不立即執(zhí)行handle函數(shù)，每隔1000毫秒才會(huì)執(zhí)行一次handle函數(shù)；
函數(shù)節(jié)流的要點(diǎn)是，聲明一個(gè)變量當(dāng)標(biāo)志位，記錄當(dāng)前代碼是否在執(zhí)行。如果空閑，則可以正常觸發(fā)方法執(zhí)行。
代碼如下：

// 函數(shù)節(jié)流 定時(shí)器
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閑，如果在執(zhí)行中，則直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數(shù)節(jié)流");
        canRun = true;
    }, 300);
};

節(jié)流函數(shù)的封裝使用

//節(jié)流throttle代碼（時(shí)間戳）
var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log("函數(shù)節(jié)流");        
}        
window.addEventListener("scroll", throttle(handle, 1000));

//節(jié)流throttle代碼（定時(shí)器）
var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log("函數(shù)節(jié)流");        
}        
window.addEventListener("scroll", throttle(handle, 1000));

// 節(jié)流throttle代碼（時(shí)間戳+定時(shí)器）：
var throttle = function(func, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}
function handle() {      
    console.log("函數(shù)節(jié)流");
} 
window.addEventListener("scroll", throttle(handle, 1000));

用時(shí)間戳+定時(shí)器，當(dāng)?shù)谝淮斡|發(fā)事件時(shí)馬上執(zhí)行事件處理函數(shù)，最后一次觸發(fā)事件后也還會(huì)執(zhí)行一次事件處理函數(shù)