[Vuejs]-Shuddering text input caused by PATCH request

by

0👍

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!

Leave a comment