摘要：此時需要采用防抖和節流的方式來減少調用頻率，同時不影響原來效果。函數防抖當持續觸發事件時，一段時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前就觸發了事件，延時重新開始。

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

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

上圖中，持續觸發scroll事件時，并不執行handle函數，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件；
上面原理：對處理函數進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。
代碼如下：

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

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

防抖函數的封裝使用

/**
 * 防抖函數
 * @param method 事件觸發的操作
 * @param delay 多少毫秒內連續觸發事件，不會執行
 * @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);    
    }
}
// 處理函數
function handle() {    
    console.log("函數防抖"); 
}
// 滾動事件
window.addEventListener("scroll", debounce(handle, 1000));

當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。
函數節流應用的實際場景，多數在監聽頁面元素滾動事件的時候會用到。

上圖中，持續觸發scroll事件時，并不立即執行handle函數，每隔1000毫秒才會執行一次handle函數；
函數節流的要點是，聲明一個變量當標志位，記錄當前代碼是否在執行。如果空閑，則可以正常觸發方法執行。
代碼如下：

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

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

節流函數的封裝使用

//節流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("函數節流");        
}        
window.addEventListener("scroll", throttle(handle, 1000));

//節流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("函數節流");        
}        
window.addEventListener("scroll", throttle(handle, 1000));

// 節流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("函數節流");
} 
window.addEventListener("scroll", throttle(handle, 1000));

用時間戳+定時器，當第一次觸發事件時馬上執行事件處理函數，最后一次觸發事件后也還會執行一次事件處理函數