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 請求，而不是在用戶停下滾動頁面操做時纔去請求數據。這樣的場景，就適合用節流技術來實現。