this is my Code:

Template:

<input type="search" class="form-control" v-on:input="fetchData()" v-model="searchfor">

Js/Vue:

fetchData(page_url) {
       
      setTimeout(() => {
        showAjaxLoading(true);
         ...
         MyAjaxCall()
         ...
        .then(... ShowAjaxLoading(false) ...)
      }, 500)
    },

So if im gonna search items, every single keypressed it fires my fetchData Method. I tried to set a Timeout of 500 so the Ajax call only gets called after 500ms. In this time the user can do the input search and after the time it SHOULD fires ONE FetchData.

BUT the Fetches only accumulate and all fires after 500ms.

I need only 1 FetchData after 500ms