淺談函數之防抖與節流

防抖與節流

 一般呢咱們使用防抖與節流都是爲了限制函數的頻繁執行，使得性能大大下降，使得用戶可能存在出現卡頓等等。

區別

• 防抖：只在設定的時間內執行一次代碼
• 節流：在設定的時間內若是沒有觸發過該事件，纔會觸發事件

函數節流

 函數節流的場景每每在onscroll，resize，mousemove等等函數中應用，使得執行觸發該事件所對應的代碼時只在間隔設定的事件內執行，下面咱們來上代碼。
 節流函數：

/* 經過節流函數咱們能夠極大優化本身的性能,節約本身的性能 */
        function throttle(fn,delay) {
            //記錄上一次函數觸發的時間
            var lastTime = 0
            return function () {
                //記錄當前函數觸發的時間
                var nowTime = Data.now()
                /* 若是相差的事件大於延遲的時間則觸發該函數 */
                if (nowTime - lastTime > delay) {
                    /* 爲了防止函數多層嵌套致使this指向錯誤，此時在這裏給fn綁定this */
                    fn().call(this)
                    //同步時間
                    /* 閉包，內部函數引用外部函數 */
                    lastTime = nowTime
                }
            }
        }

 滾動滾動條觸發該事件

/* 此時delay延遲的值爲200ms */
 /* 綁定滾動函數,當滾動滾動條時觸發此函數 */
 document.onscroll = throttle(function () {
     console.log('scroll事件被觸發了',Date.now())
 },200)

執行結果：

 能夠看出當咱們頻繁滑動滾動條時，觸發該函數近似於200ms觸發一次srcoll函數，那麼此時咱們節流函數就成功了。若是不添加節流函數時該函數自滾動開始就會被頻繁觸發。

函數防抖

函數防抖經常用於的場景爲用戶頻繁點擊提交按鈕，頻繁切換某選項的狀態，頻繁進行輪播圖的翻頁等等。下面咱們來上代碼。
 防抖函數：

function debounce(fn,delay) {
      //記錄上一次的延時器
      var timer = null
      return function () {
          //清除上一次的定時器,當重複點擊時，一上來就將上次點擊第那個清除掉
          clearTimeout(timer)
          /* 從新設置上定時器 */
          time = setTimeout(function () {
              /* 防止屢次指向時this發生改變 */
              fn.apply(this)
          },delay)
      }
  }

 點擊函數代碼：

/* 當用戶點擊按鈕時觸發函數 */
  document.getElementById('btn').onclick = debounce(function () {
       console.log('點擊事件被觸發了' + Date.now())
   },1000)

效果圖：

 
 
 
 防抖與節流就介紹完了，歡迎評論區指正留言。