Explicación detallada del procesamiento de aceleración y anti-vibración del evento de clic de Vue

Función anti-vibración
Definición: Después de que el evento se activa varias veces, la función de procesamiento de eventos se ejecuta solo una vez y se ejecuta al final de la operación de activación.

//在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)
}

Limitación de función
Definición: Después de que se activa un evento de función, no se puede llamar de forma continua dentro de un intervalo de tiempo corto La siguiente llamada de función solo se puede realizar después de que haya pasado el intervalo de tiempo especificado después de la última ejecución de la función.

//在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)