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

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

當(dāng)持續(xù)觸發(fā)事件時，一段時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間到來之前就觸發(fā)了事件，延時重新開始。
函數(shù)防抖的應(yīng)用場景，最常見的就是用戶注冊時候的手機(jī)號碼驗(yàn)證和郵箱驗(yàn)證了。只有等用戶輸入完畢后，前端才需要檢查格式是否正確，如果不正確，再彈出提示語。

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

// 函數(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ā)事件，不會執(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("滾動條位置：" + 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ù)防抖"); 
}
// 滾動事件
window.addEventListener("scroll", debounce(handle, 1000));

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

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

// 函數(shù)節(jié)流 定時器
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代碼（時間戳）
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代碼（定時器）
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代碼（時間戳+定時器）：
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));

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