I have a text input box in VueJs for a ticket, which updates the ticket in the database with the input after a setTimer(10000) expires, however, when the timer expires if you are still mid-writing it shudders and you have to watch it be reloaded and retyped in front of you as the request fires. It's only about 3 seconds long but that's too long for my use case. What is the best way to avoid this issue?
Relevant Code(?)
<b-field label="Description">
<b-input
type="textarea"
v-model="strValue"
:disabled="waiting.updateAttachment"
>
</b-input>
</b-field>
JS
strValue: {
get: function () {
return this.attachment.strValue;
},
set: function (val) {
let self = this; setTimeout(function(){ return self.updateAttachment([self.attachment.id, { strValue: val }]) },8000) },
},
},
There are lots of ways to handle input delay to avoid this, but looking at your code I'm not sure you're actually clearing your timeout when updating the value of your input. To prevent it from over-firing, you'll want to make sure you cancel the timeout function before setting it again with each keypress.
So, you could track your timeout with a prop in data:
data() {
return {
strValue: '',
inputTimeout: null
};
}
And then in your set function:
set: function(val){
let self = this;
self.strValue = val;
clearTimeout(self.inputTimeout);
self.inputTimeout = setTimeout(function() {
// your update attachment function call goes here
}, 1000);
}
This would basically say "wait 1 second after the user stops typing before updating the attachment." You could also use a watch on strValue and ditch the explicit getter/setter, but do whatever feels the most comfortable!