關於Js debounce 函數小結

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  以下場景往往由於事件頻繁被觸發，因而頻繁執行DOM操作、資源加載等重行為，導致UI停頓甚至瀏覽器崩潰。

  1. window對象的resize、scroll事件

  2. 拖拽時的mousemove事件

  3. 射擊游戲中的mousedown、keydown事件

  4. 文字輸入、自動完成的keyup事件

  實際上對於window的resize事件，實際需求大多為停止改變大小n毫秒后執行后續處理；而其他事件大多的需求是以一定的頻率執行后續處理。針對這兩種需求就出現了debounce和throttle兩種解決辦法。本篇暫且只討論debounce方式

二、什么是debounce　　　　　　　　　　　　　　　　　　　　　　　　　　　　

   1. 定義

　　如果用手指一直按住一個彈簧，它將不會彈起直到你松手為止。

      也就是說當調用動作n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。

　   方法定義如下

/**
* 空閑控制 返回函數連續調用時，空閑時間必須大於或等於 idle，action 才會執行
* @param fn   {Function}    相關執行函數
* @param delay {Number}  延遲時間，也就是閾值，單位是毫秒
* @return {function}    返回一個“去彈跳”了的函數
*/
debounce(fn,delay)

2. 簡單實現

/**
  *
  * @param fn {Function}   實際要執行的函數
  * @param delay {Number}  延遲時間，也就是閾值，單位是毫秒（ms）
  *
  * @return {Function}     返回一個“去彈跳”了的函數
  */
  function debounce(fn, delay) {

    // 定時器，用來 setTimeout
    var timer

    // 返回一個函數，這個函數會在一個時間區間結束后的 delay 毫秒時執行 fn 函數
    return function () {

      // 保存函數調用時的上下文和參數，傳遞給 fn
      var context = this
      var args = arguments

      // 每次這個返回的函數被調用，就清除定時器，以保證不執行 fn
      clearTimeout(timer)

      // 當返回的函數被最后一次調用后（也就是用戶停止了某個連續的操作），
      // 再過 delay 毫秒就執行 fn
      timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    }
  }

 

下面展示效果

 一般代碼

一般效果

加上去抖動邏輯后代碼

去抖動后效果