Vueのクリックイベントアンチシェイクおよびスロットル処理の詳細な説明

機能アンチシェイク
定義：イベントが複数回トリガーされた後、イベント処理機能は1回だけ実行され、トリガー操作の最後に実行されます。

//在vue中对click添加防抖处理
const on = Vue.prototype.$on
// 防抖处理
Vue.prototype.$on = function (event, func) {
    
    
  let timer
  let debounce = func
  if (event === 'click') {
    
    
    debounce = function () {
    
    
      clearTimeout(timer)
      timer = setTimeout(function () {
    
    
        func.apply(this, arguments)
      }, 500)
    }
  }
  on.call(this, event, debounce)
}

関数スロットリング
定義：関数イベントがトリガーされた後、短い時間間隔内で継続的に呼び出すことはできません。次の関数呼び出しは、最後の関数実行から指定された時間間隔が経過した後にのみ実行できます。

//在vue中对click添加节流处理
const on = Vue.prototype.$on
  
// 节流
Vue.prototype.$on = function (event, func) {
    
    
  let previous = 0
  let throttle = func
  if (event === 'click') {
    
    
    throttle = function () {
    
    
      const now = new Date().getTime()
      if (previous + 1000 <= now) {
    
    
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, throttle)