本文實例講述了js防抖函數(shù)和節(jié)流函數(shù)使用場景和實現(xiàn)區(qū)別。分享給大家供大家參考，具體如下：

開發(fā)過程中，都遇到過某個事件被頻發(fā)觸發(fā)的場景，比如resize，scroll事件，input事件，而對應(yīng)的事件處理函數(shù)也會被高頻率調(diào)用，這時會增加瀏覽器負(fù)擔(dān)，用戶體驗也不好，這也是防抖函數(shù)和節(jié)流函數(shù)存在的意義和使用場景。

函數(shù)防抖（debounce）：

持續(xù)觸發(fā)事件時，在設(shè)定時間段內(nèi)沒有被觸發(fā)，才去調(diào)用事件處理函數(shù)，在設(shè)定時間段內(nèi)如果事件又被觸發(fā)，則不調(diào)用事件處理函數(shù)，并從觸發(fā)事件時間重新開始延時。

具體實現(xiàn)：

設(shè)計思路：在setTimeout中調(diào)用事件處理函數(shù)，如果在定時器觸發(fā)函數(shù)執(zhí)行之前又觸發(fā)函數(shù)，清除定時器。

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)

節(jié)流函數(shù)（throttle）  throttle   ['θrɑt(ə)l]  油門；節(jié)氣門；扼殺

當(dāng)事件被持續(xù)觸發(fā)時，在設(shè)定時間內(nèi)只讓事件處理函數(shù)觸發(fā)一次。

定時器實現(xiàn)模式：定時器在延時時間執(zhí)行過后，重置為null, 定時器為null時，重新設(shè)置定時器，如此循環(huán)

//節(jié)流函數(shù)
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,1000),false)

時間戳實現(xiàn)模式：初始化時獲取時間，每次觸發(fā)事件時再次獲取時間，兩次時間間隔等于或大于設(shè)定時間，執(zhí)行事件，初始化時間重置為當(dāng)前時間，如此循環(huán)。

//節(jié)流函數(shù) 時間戳模式
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();
　　　　}
　　}
}

也可以使用時間戳加定時器結(jié)合實現(xiàn)：

總結(jié)：

函數(shù)防抖：在無事件觸發(fā)后的設(shè)定時間執(zhí)行事件，將幾次操作合并為一此操作進(jìn)行。這樣一來，只有最后一次操作能被觸發(fā)。

函數(shù)節(jié)流：使得一定時間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否到達(dá)一定時間來觸發(fā)函數(shù)。

區(qū)別： 函數(shù)節(jié)流不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)。

比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發(fā)一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù)。這樣的場景，就適合用節(jié)流技術(shù)來實現(xiàn)。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論