如何在Vue中優雅的使用防抖節流

1. 什么是防抖節流

防抖：防止重復點擊觸發事件

首先啥是抖？ 抖就是一哆嗦！原本點一下，現在點了3下！不知道老鐵腦子是不是很有畫面感！哈哈哈哈哈哈

典型應用就是防止用戶多次重復點擊請求數據。

代碼實現要點：設置一個定時器，通過閉包，抓住定時器變量，控制定時器的添加和清除

直接上代碼

  function debounce(fn, time) {
      let _arguments = arguments
      let timeout = null
      return function () {
          if (timeout) {
              clearTimeout(timeout)
          }
          timeout = setTimeout(() => {
              fn.call(this, _arguments)
          }, time);
      }
  }

節流：指定時間間隔內只會執行一次任務

大家都玩過FPS游戲吧（沒玩過？？？打槍知道了吧！）道具的射速是一定的，不會因為你點擊鼠標的速度加快而增加。

代碼實現要點：通過一個布爾變量作為狀態，判斷代碼是否需要執行

直接上代碼

  function throttle(fn, time) {
      let _arguments = arguments
      let canRun = true 
      return function () {
          if (!canRun) return
          canRun = false
          setTimeout(() => {
              fn.call(this, _arguments)
              canRun = true
          }, time);
      }
  }

2. 在Vue中優雅的使用

我的應用場景：頭像裁剪組件，對滾輪縮放后生成預覽圖片進行防抖處理

因為Vue組件中的 this 原因

methods:{
  previewImageDebounce: Debounce(this.previewImage, 1000),
}
//報錯 Uncaught TypeError: Cannot read property 'previewImage' of undefined

我們要針對上面的防抖函數進行改造（函數內容this指向沒問題，我們通過函數名調用函數）

/*
 *  description: 在vue中使用的防抖函數
 *  param fnName {String}  函數名
 *  param time {Number}    延遲時間
 *  return: 處理后的執行函數
 */
function VueDebounce(fnName, time) {
  let timeout = null;
  return function() {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      this[fnName]();
    }, time);
  };
}

在Vue組件中使用

methods:{
    /* 監聽滾輪滑動 */
  Wheel(ev) {
    if (!this.newImage) return;
    // 判斷放大和縮小
    ev.deltaY > 0 ? this.makeScaleChange(1) : this.makeScaleChange(0);
		// 預覽圖片
    this.previewImageDebounce();
  },
  /* 預覽圖片(防抖處理后) */
  previewImageDebounce: VueDebounce("previewImage", 1000),
  /* 預覽圖片 */
  previewImage() {......}
}

這樣的寫法，算是很優雅了。節流就不在這里展開了，開動你的小腦袋不成問題。