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

1. window對象的resize、scroll事件

2. 拖拽時的mousemove事件

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

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

實際上對于window的resize事件，實際需求大多為停止改變大小n毫秒后執(zhí)行后續(xù)處理；而其他事件大多的需求是以一定的頻率執(zhí)行后續(xù)處理。針對這兩種需求就出現(xiàn)了debounce和throttle兩種解決辦法。
throttle:觸發(fā)-上次動作執(zhí)行時間〉大于限制時間->執(zhí)行動作，記錄執(zhí)行時間 debounce:觸發(fā)-上次動作觸發(fā)時間〉大于限制時間->執(zhí)行動作, 記錄觸發(fā)時間

什么是debounce
_.debounce 是一個通過 Lodash 限制操作頻率的函數(shù)。
Ajax請求直到用戶輸入完畢才會發(fā)出。想要了解更多關(guān)于請參考：https://lodash.com/docs#debounce`

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

當調(diào)用動作n毫秒后，才會執(zhí)行該動作，若在這n毫秒內(nèi)又調(diào)用此動作則將重新計算執(zhí)行時間。

舉個栗子~~

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

    // 定時器，用來 setTimeout
    var timer

    // 返回一個函數(shù)，這個函數(shù)會在一個時間區(qū)間結(jié)束后的 delay 毫秒時執(zhí)行 fn 函數(shù)
    return function () {

      // 保存函數(shù)調(diào)用時的上下文和參數(shù)，傳遞給 fn
      var context = this
      var args = arguments

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

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

一般效果-會出現(xiàn)抖動

加上抖動代碼后的效果