文章目錄

一.函數(shù)防抖

二、函數(shù)節(jié)流

1.時(shí)間戳實(shí)現(xiàn)

2.定時(shí)器實(shí)現(xiàn)

3.用節(jié)流優(yōu)化防抖(定時(shí)器+時(shí)間戳)

三、總結(jié)

四、例子

一.函數(shù)防抖

當(dāng)持續(xù)觸發(fā)事件時(shí)，并不執(zhí)行事件處理函數(shù)，一定時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次；如果設(shè)定的時(shí)間到來之前，又一次觸發(fā)了事件，就重新開始延時(shí)。

function debounce(fn, delay) {
  // 定時(shí)器
  let timer = null
  // 將debounce處理結(jié)果當(dāng)作函數(shù)返回
  return function () {
    // 保留調(diào)用時(shí)的this上下文
    let context = this
    // 保留調(diào)用時(shí)傳入的參數(shù)
    let args = arguments
    // 每次事件被觸發(fā)時(shí)，都去清除之前的舊定時(shí)器
    if(timer) {
        clearTimeout(timer)
    }
    // 設(shè)立新定時(shí)器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

二、函數(shù)節(jié)流

當(dāng)持續(xù)觸發(fā)事件時(shí)，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)。

1.時(shí)間戳實(shí)現(xiàn)

function throttle(fn, interval) {
      // last為上一次觸發(fā)回調(diào)的時(shí)間
      // 對(duì)比時(shí)間戳，初始化為0則首次觸發(fā)立即執(zhí)行，初始化為當(dāng)前時(shí)間戳則wait毫秒后觸發(fā)才會(huì)執(zhí)行
      let last = 0;
      // 將throttle處理結(jié)果當(dāng)作函數(shù)返回
      return function () {
          // 保留調(diào)用時(shí)的this上下文
          let context = this
          // 保留調(diào)用時(shí)傳入的參數(shù)
          let args = arguments
          // 記錄本次觸發(fā)回調(diào)的時(shí)間
          let now = Date.now();
          
          // 判斷上次觸發(fā)的時(shí)間和本次觸發(fā)的時(shí)間差是否小于時(shí)間間隔的閾值
          if (now - last >= interval) {
          // 如果時(shí)間間隔大于我們?cè)O(shè)定的時(shí)間間隔閾值，則執(zhí)行回調(diào)
              last = now;
              fn.apply(context, args);
          }
        }
    }

定時(shí)器實(shí)現(xiàn)

function throttle(fn, wait) {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null
        fn.call(this, arguments)
      }, wait)
    }
  }
}

3.用節(jié)流優(yōu)化防抖(定時(shí)器+時(shí)間戳)
防抖的問題在于如果用戶的操作十分頻繁——他每次都不等 設(shè)置的 delay 時(shí)間結(jié)束就進(jìn)行下一次操作，于是每次都為該用戶重新生成定時(shí)器，回調(diào)函數(shù)被延遲了不計(jì)其數(shù)次。 頻繁的延遲會(huì)導(dǎo)致用戶遲遲得不到響應(yīng)，用戶同樣會(huì)產(chǎn)生“這個(gè)頁面卡死了”的觀感。

用節(jié)流來優(yōu)化，保證在一定時(shí)間段內(nèi)會(huì)調(diào)用一次事件處理函數(shù)。

function throttle(fn, delay) {
       // last為上一次觸發(fā)回調(diào)的時(shí)間, timer是定時(shí)器
       let last = 0, timer = null
       // 將throttle處理結(jié)果當(dāng)作函數(shù)返回
       
       return function () { 
         // 保留調(diào)用時(shí)的this上下文
         let context = this
         // 保留調(diào)用時(shí)傳入的參數(shù)
         let args = arguments
         // 記錄本次觸發(fā)回調(diào)的時(shí)間
         let now = +new Date()
        // +是一元操作符，利用js隱式轉(zhuǎn)換將其他類型變?yōu)閿?shù)字類型
         
         // 判斷上次觸發(fā)的時(shí)間和本次觸發(fā)的時(shí)間差是否小于時(shí)間間隔的閾值
         if (now - last < delay) {
         // 如果時(shí)間間隔小于我們?cè)O(shè)定的時(shí)間間隔閾值，則為本次觸發(fā)操作設(shè)立一個(gè)新的定時(shí)器
            clearTimeout(timer)
            timer = setTimeout(function () {
               last = now
               fn.apply(context, args)
             }, delay)
         } else {
             // 如果時(shí)間間隔超出了我們?cè)O(shè)定的時(shí)間間隔閾值，那就不等了，無論如何要反饋給用戶一次響應(yīng)
             last = now
             fn.apply(context, args)
         }
       }
     }

三、總結(jié)
函數(shù)防抖：將幾次操作合并為一此操作進(jìn)行。原理是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置。這樣一來，只有最后一次操作能被觸發(fā)。
函數(shù)節(jié)流：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù)。
區(qū)別： 函數(shù)節(jié)流不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)。
場(chǎng)景：比如在頁面的無限加載場(chǎng)景下，我們需要用戶在滾動(dòng)頁面時(shí)，每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求，而不是在用戶停下滾動(dòng)頁面操作時(shí)才去請(qǐng)求數(shù)據(jù)。這樣的場(chǎng)景，就適合用節(jié)流技術(shù)來實(shí)現(xiàn)。

轉(zhuǎn)自：csdn 

藍(lán)藍(lán)設(shè)計(jì)( www.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)