vue3+js implementiert Button-Anti-Shaking, um das wiederholte Senden von Anfragen zu vermeiden

vue2-Referenz: https://blog.csdn.net/csdnyp/article/details/124273358

Inhaltsverzeichnis

 1. Erstellen Sie eine neue „preventReClick.js“.

 2. Einführung in Main.js

 3. Verwenden Sie die Ein-Taste

Lassen Sie uns ein kleines Konzept geben:

Anti-Shake : Wenn ein Ereignis in einer bestimmten Zeit mehrmals ausgelöst wird, führt die Rückruffunktion nur das letzte aus, denn wenn das Ereignis innerhalb der angegebenen Zeit erneut ausgelöst wird, wird der Timer zurückgesetzt und die angegebene Zeit neu berechnet .

oder

Nachdem das Ereignis ausgelöst wurde, kann die Rückruffunktion nur einmal innerhalb der angegebenen Zeit ausgeführt werden. Wenn das Ereignis innerhalb der angegebenen Zeit erneut ausgelöst wird, wird die angegebene Zeit erneut gezählt.

Drosselung : Wenn ein Ereignis kontinuierlich ausgelöst wird, kann die Rückruffunktion innerhalb eines bestimmten Zeitraums nur einmal aufgerufen werden. Wenn das Ereignis innerhalb der angegebenen Zeit erneut ausgelöst wird, wird nichts unternommen und der Timer wird nicht zurückgesetzt.

Unterschied : Anti-Shaking besteht darin, mehrere Ausführungen in die letzte Ausführung umzuwandeln, und Drosselung besteht darin, mehrere Ausführungen innerhalb einer bestimmten Zeit in nur eine Ausführung umzuwandeln. Im Allgemeinen wird der Timer nicht zurückgesetzt. Das heißt, er wird nicht zurückgesetzt, wenn (timer) clearTimeout(timer); (außer bei der Timestamp + Timer-Version)

Warum müssen wir die Tasten stabilisieren? Wenn auf der Seite eine Abfrageschaltfläche vorhanden ist und der Benutzer in böswilliger Absicht mehrmals auf diese Schaltfläche klickt, wird eine große Anzahl von Anforderungen initiiert, was dazu führen kann, dass die Seite einfriert.

 1. Erstellen Sie eine neue  „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. Einführung in Main.js

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

const app = createApp(App)

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

 3. Verwenden Sie die Ein-Taste

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