本文例項講述了js防抖函式和節流函式使用場景和實現區別。分享給大家供大家參考，具體如下：

開發過程中，都遇到過某個事件被頻發觸發的場景，比如resize，scroll事件，input事件，而對應的事件處理函式也會被高頻率呼叫，這時會增加瀏覽器負擔，使用者體驗也不好，這也是防抖函式和節流函式存在的意義和使用場景。

函式防抖（debounce）：

持續觸發事件時，在設定時間段內沒有被觸發，才去呼叫事件處理函式，在設定時間段內如果事件又被觸發，則不呼叫事件處理函式，並從觸發事件時間重新開始延時。

具體實現：

設計思路：在setTimeout中呼叫事件處理函式，如果在定時器觸發函式執行之前又觸發函式，清除定時器。

function debounce(fn,timeout){
  timeout = timeout || 1000;
  let timer;
  return () => {
    if(timer){ clearTimeout(timer)}
    timer = setTimeout(() => {
      fn()
    },timeout)
  }
}
 
function printEvent(){
  console.log('1121212')
}
 
window.addEventListener('scroll',debounce(printEvent,1000),false)

節流函式（throttle） throttle ['θrɑt(ə)l]油門；節氣門；扼殺

當事件被持續觸發時，在設定時間內只讓事件處理函式觸發一次。

定時器實現模式：定時器在延時時間執行過後，重置為null,定時器為null時，重新設定定時器，如此迴圈

//節流函式
function throttle(fn,range){
  range = range || 1000;
  let timer;
  return () => {
    //console.log(111,typeof timer)
    if(!timer){
      timer = setTimeout( () => {
        fn()
        timer = null
      },range)
    }
  }
}
 
window.addEventListener('mousemove',throttle(printEvent,false)

時間戳實現模式：初始化時獲取時間，每次觸發事件時再次獲取時間，兩次時間間隔等於或大於設定時間，執行事件，初始化時間重置為當前時間，如此迴圈。

//節流函式 時間戳模式
var throttle2 = 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();
　　　　}
　　}
}

也可以使用時間戳加定時器結合實現：

總結：

函式防抖：在無事件觸發後的設定時間執行事件，將幾次操作合併為一此操作進行。這樣一來，只有最後一次操作能被觸發。

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

區別：函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。

比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。