JS的防抖與節流

在進行窗口的resize、scroll，輸入框內容校驗等操作時，如果事件處理函數調用的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。

此時我們可以采用debounce（防抖）和throttle（節流）的方式來減少調用頻率，同時又不影響實際效果。

 

函數防抖

函數防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。

如下，持續觸發scroll事件時，並不執行handle函數，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件。

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null) clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 處理函數
function handle() {    
    console.log(Math.random()); 
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

　　

函數節流

函數節流（throttle）：當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。

節流通俗解釋就比如我們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉着勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。

如下，持續觸發scroll事件時，並不立即執行handle函數，每隔1000毫秒才會執行一次handle函數。

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(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

　　

總結

函數防抖：將幾次操作合並為一此操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。

函數節流：使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。

區別： 函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最后一次事件后才觸發一次函數。比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流技術來實現。