vue3+js implementa un botón anti-vibración para evitar el envío repetido de solicitudes

Referencia de vue2: https://blog.csdn.net/csdnyp/article/details/124273358

Tabla de contenido

 1. Cree un nuevo preventReClick.js

 2. Introducción a Main.js

 3. Usar el botón

Demos un pequeño concepto:

Antivibración : si un evento se activa varias veces en un tiempo específico, la función de devolución de llamada solo ejecutará la última, porque si el evento se activa nuevamente dentro del tiempo especificado, el temporizador se restablecerá y se volverá a calcular el tiempo especificado. .

o

Después de que se activa el evento, la función de devolución de llamada solo se puede ejecutar una vez dentro del tiempo especificado. Si el evento se activa nuevamente dentro del tiempo especificado, el tiempo especificado se contará nuevamente.

Limitación : cuando un evento se activa continuamente, la función de devolución de llamada solo se puede llamar una vez dentro de un período de tiempo específico. Si el evento se activa nuevamente dentro del tiempo especificado, no se hará nada y el temporizador no se restablecerá.

Diferencia : anti-vibración consiste en cambiar varias ejecuciones a la última ejecución, y la limitación es cambiar varias ejecuciones a una sola ejecución dentro de un tiempo específico. Generalmente, el temporizador no se reiniciará, es decir, no se reiniciará si (temporizador) clearTimeout(timer); (excepto para la versión de marca de tiempo + temporizador)

¿Por qué necesitamos estabilizar los botones? Si hay un botón de consulta en la página y el usuario hace clic maliciosamente en este botón varias veces, se iniciará una gran cantidad de solicitudes, lo que puede provocar que la página se congele.

 1. Cree un nuevo  preventReClick.js

export default (app) => {
    app.directive('preventReClick', {
        mounted(el, binding) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true
                    setTimeout(() => {
                        el.disabled = false
                    }, binding.value || 2000)
                }
            })
        }
    })
}

 2. Introducción a Main.js

import {createApp} from 'vue'
import preventReClick from './assets/js/preventReClick'

const app = createApp(App)

app.use(preventReClick)
app.mount('#app')

 3. Usar el botón

<el-button type="primary" size="medium" @click="submit" v-preventReClick >确 定</el-button>