函式防抖和函式節流

Alex丶Cheng發表於2019-01-26
函式

一、函式防抖

1.描述：函式防抖就是在函式需要頻繁觸發情況時，在指定的時間間隔後，才執行一次

2.應用場景：檢測滾動條變化 （函式節流也將利用此場景）,輸入框搜尋

3.栗子：

mounted ( ) {
     window.addEventListener(' scroll ', this.debounce( function ( ) {
         console.log( ' hello scroll ... ' )
     }, 2000 ) )
},

methods: {

  debounce (fn, delay) {

      let timer = null // 一開啟頁面，先宣告 timer, 開始滑動滾動條的時候，才執行返回方法

      return function () {

        if (timer) clearTimeout(timer) // 將之前的 timer 清除

        timer = setTimeout(() => {

          fn.apply(this) // 如果滾動條不滾動的時間等於設定的delay, 那麼就執行 fn 函式

        }, delay)

      }

   },

}

二、函式節流

1.描述：函式不斷觸發的情況下，通過函式節流來指定函式觸發的頻率，比如每隔2s觸發一次

2.解決方案 : 時間戳

3.栗子：

throttle (fn, delay) {

   let last = new Date() // 一進入頁面，先獲取此時的時間戳

   return function () { // 這裡利用閉包，可以繼續訪問 last 的值

      let now = new Date() // 滑動滾動條，將不停的獲取新老時間戳

      let result = now - last

      console.log('result: ', result)

      if (result > delay) { // 直到新的時間戳與last值只差大於指定時間間隔，將呼叫 fn

        fn.apply(this,arguments);

        last = now // 讓老的時間戳等於現在的時間戳， 再隔 2s 再執行

      }

   }

}

三、綜合使用（效能更佳）

1. 結合定時器和時間戳使用

function performance(fn, delay, interval) { // 回撥 ,  延遲，間隔

    let timer = null

    let last = new Date()

    return function () {

        let now = new Date()

        if ( timer ) clearTimeout(timer)

        if ( now - last > interval ) {

            fn.apply( this )

            last = now

        } else {

             timer = setTimeout( () => {

                   fn.apply( this )

             }， delay)

        }

    }

}



相關文章