VUE----使用JS防抖

參考：JS 防抖與節流

場景：點擊一個按鈕，頻繁的點擊需要不斷和後臺進行交互，更新後臺數據，實際上以最後的一次操作爲準也是沒有問題的。使用JS防抖便可以解決這個問題

【1】JS封裝

/**
* 將防抖函數封裝到公共js代碼裏
* 這裏涉及到閉包的相關內容，閉包內容自行百度
*/

export function debouce(func, delay = 100) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.call(this, ...args);
    }, delay);
  }
}

【2】頁面引用，一個最最最簡單的例子

<script>
import { debouce } from '../../util/util'
export default {
  name:'',
  data() {
    return {
        clickMe : null
    }
  },
  created(){
     // clickMe 接受返回的函數， 這裏的function你也可以換成你的methods裏面定義的函數
     this.clickMe = debouce(function(data){
        console.log('123:' + data);
      }, 3000)
  },
  methods: {
    test: function() {
      this.clickMe('zhoulw');
    },
    // 你也可以這樣寫
    test2: function(){
        if (!this.clickMe) {
            this.clickMe = debouce(function(data){
                console.log('123:' + data);
            }, 3000)
        }
        this.clickMe('zhoulw');
    }
  }

}
</script>