[Vuejs]-Wait x seconds for new emitted value before triggering a function

by

2👍

✅

What you need is debouncing. Here is an example:

var timeout, delay = 3000;

function func1() {
  clearTimeout(timeout);
  timeout = setTimeout(function(){
    alert("3000 ms inactivity");
  }, delay);
}
<input type="text" oninput="func1()">

When emitted, simply call func1(), and if there are no new emissions after 3000 ms, the function in timeout will be executed.

1👍

It would be better to understand the problem and use case if you add the code also.
but As I could understand the problem these is two way

  1. if you using inside input and triggering based @changed event you can add @change.lazy this not trigger on each change.
  2. second solution is to use setTimeout(function,delayInMs) inside parent

vuejs Docs link

0👍

By simply changing the handleFilters function to :

handleFilters(filters) {
   clearTimeout(this.timeout);
   this.timeout = setTimeout(
      this.getGamerTags,
      this.delay,
      filters.find(o => o.field == "playerGamerTag").filter
   );
},

the problem is solved.

Leave a comment