Button can only be clicked once

Today when I was using the add button to add records, I suddenly added several records, which left me stunned.Then it responded that the server did not respond because the network was stuck and the request was sent repeatedly.

Crazy prompt added successfully~~~

Today I share two methods:

The first uses the once event modifier

Use @click.once to realize that the button can only be clicked once, which is suitable for submitting form records or performing database operations

1. once, only execute once
2. Only the first click will execute, a second click will not work

OK

The second way to customize one

Custom methods can be written in a js file for reuse.This is a reference to an article by a big guy, but I feel that it is not enough for the specific use, so I will use my own example to demonstrate it.

First I choose to create a clickThrottle.js file under the components file under src

clickThrottle.js file content:

/* prevent repeated clicks */let clickTimer = 0function clickThrottle(interval = 3000) {let now = +new Date(); // get the timestamp of the current timelet timer = clickTimer; // record the event stamp of the trigger eventif (now - timer < interval) {// If the current time - the event when the event was triggered < interVal, then the condition is not met, return false directly,// Don't let the current event continue to executereturn false;} else {// On the contrary, record the timestamp of the event that meets the conditions, and return true, so that the event continues to be executedclickTimer = now;return true;}}export default clickThrottle

Import files

import antiShake from '@/components/clickThrottle'

Use:

Well, I call this wave of mother-level teaching. If it is helpful to you, please like, comment and bookmark (o´ω`o)و

Rendering:

Reference article address: http://t.csdn.cn/9g1m3