Within my JS component, I have various methods that handle events like click events and trigger ajax requests. To prevent the scenario where multiple clicks on the same button result in several ajax requests being fired off simultaneously, I typically use a flag. This flag is represented by a variable called working, which starts off as false. When an action is clicked, I set it to true, and once the ajax request is completed, I set it back to false. If working === true, I block any additional ajax requests.
The issue arises when working === true, as it blocks all actions within the component, preventing multiple actions from occurring at the same time. For example, a user can't click "save" until their previous "like" click has finished.
In the provided code snippet, respondToClickB would be halted until respondToClickA has been resolved.
I am seeking advice on how to improve the handling of this issue. Any suggestions are greatly appreciated!
export default {
data: function() {
return {
working: false
}
},
methods: {
respondToClickA: function() {
let self = this;
if(!self.working)
{
self.working = true;
axios.get('/ajax')
.then(function(response){
self.working = false;
});
}
},
respondToClickB: function() {
let self = this;
if(!self.working)
{
self.working = true;
axios.get('/ajax')
.then(function(response){
self.working = false;
});
}
}
}
}