Vueのclick事件の手ぶれ防止と節流処理について詳しく説明します。

ファンクション
定義：複数のトリガイベントの後、イベント処理関数は一回だけ実行され、トリガ動作の終了時に実行されます。
vueでclickに手ぶれ防止処理を追加します。

const on = Vue.prototype.$on
//     
Vue.prototype.$on = function (event, func) {
  let timer
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      clearTimeout(timer)
      timer = setTimeout(function () {
        func.apply(this, arguments)
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}

関数の流れ
定義：関数イベントをトリガした後、短時間の間に連続的に呼び出すことができません。前回の関数が実行された後、所定の時間間隔を過ぎてから、次の関数呼び出しができます。
vueでclickに節流処理を追加します。

const on = Vue.prototype.$on
 
//   
Vue.prototype.$on = function (event, func) {
  let previous = 0
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      const now = new Date().getTime()
      if (previous + 1000 <= now) {
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, newFunc)
}

以上のVueのclick事件の手ぶれ防止と節流処理は詳細には小編が皆さんに共有している内容です。参考にしていただければと思います。よろしくお願いします。