One of the problems that makes people crazy during project development is a click event, which will repeatedly send multiple requests when clicking quickly. This is not allowed to appear.
But how to solve this problem?
The general method is to immediately disable the button when clicked, so as to avoid repeated sending of requests. But I found that there is one disadvantage to this, that is:
If, there are many verifications for this event, such as whether the phone and email format is correct, whether the required ones are filled in, etc. Once you click, you disable the button. You find that you have not filled in what you should fill in. After you go back and fill it, you find that you can't click the button? That's because you disabled it when you clicked just now, so you have to cancel the button's disable in the verification method. This causes you to click. The first step is to disable the button, and then verify it step by step. If there is an error in the verification, you have to cancel the disable. When all verifications are passed, in the requested callback function, you must cancel the disable if it succeeds, and you must cancel the disable if it fails, because if it fails, the user will most likely continue to click twice. If it does not cancel the disable, the user will find out why it cannot be clicked. This causes the entire article to set and cancel the button disable. Once modified, it is difficult to maintain.
In vue, there is a lodash that we can use just by introducing. For example, the following code:
<template>
<div>
<div class="bindBtn">
<button class="bindDataBtn" @click="postAction">submit</button>
</div>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
}
},
mounted() {
},
methods: {
sendAjax(){
/*Here are the requested interface, parameters, callback functions, etc.*/
},
postAction(){
()
}
},
created(){
= _.debounce(,500);
}
}
</script>
We first write the ajax method to send the request in a function, here is the sendAjax function. Secondly, we introduce lodash, and then customize the sendAjax function with a method. Here is doPostAction, where _ is the lodash we introduced, and _.debounce is a function that limits the operation frequency, and 500 is a unit of milliseconds.
When executing a click event, that is, the postAction function, we only need to call the doPostAction function, and the 500 function is that no matter how many times you execute the click event, it will only be executed once.
This will reduce the whole article of disable and disable
Finally, the official website example is attached:Click to go
The above article vue solves the problem of sending multiple requests at the same time. It is all the content I share with you. I hope you can give you a reference and I hope you can support me more.