debounce, delay in events in Vue 3

We are going to make a delay when writing in the search type field in Vue 3

One problem that we would have when we pass the application to production is that, every time we use the search field, we will see that the request to the server is automatically triggered, that is, every time the user writes on said field, a request is sent. request, which is very inefficient since, usually, the user wants to enter at least one word to perform the search, therefore, the ideal is to wait at least a few milliseconds before sending the request, for that, we are going to apply a delay or debounce to said field; Vue doesn't natively support this feature, so we have to use a plugin like the following:

https://www.npmjs.com/package/vue-debounce

Which we install with:

$ npm i vue-debounce

And we configure:

resources/js/app.js

import { vueDebounce } from 'vue-debounce'
//***
myApp
 .directive('debounce', vueDebounce ({ lock: true }))
 .mount(el);

To use it, we have several ways as you can review in the official documentation, but, as we are only interested in applying to a single field, we can use the following implementation:

resources/js/Pages/Dashboard/Post/Index.vue

<!-- <TextInput autofocus @keyup="customSearch" class="w-full" type="text" placeholder="Search..." v-model="search" /> -->
<TextInput autofocus v-debounce.500ms="customSearch" :debounce-events="['keyup']" class="w-full" type="text" placeholder="Search..." v-model="search" />

In which, we indicate which function we want to call after X time:

v-debounce.500ms="customSearch"

Although it can be applied to for example seconds:

v-debounce.1s="customSearch"

And what are the events we want to hear:

:debounce-events="['keyup']"

Now, every time we write something, it will take half a second before sending the request, giving a reasonable time for the user to finish writing.

With this, we complete the filters and search field applied to our application.

Video Transcript

Here the application could be said to work wonderfully at least this filter Look how fast it works and it is because it is local Of course if it is an application that you are going to have locally at your Well here I do not know what happened but if it is an application that is going to work locally at your company or at your project whatever you want you would not have a problem because everything works localhost as we have it but if it is going to connect to the Internet or the application is on the Internet better said then you can have some problems because you are sending many requests basically every time you write something notice that sometimes it also gets a little stuck every time you write something you are sending a request which would usually be unnecessary because there is no need for such a specific filter that does not work that way apart from being inefficient and what we all know then in these cases what is tended to be done is simply leave when the user starts to write leave a certain margin or waiting time and from that waiting time is that the request is sent and this gives the user a chance that well he can write here quickly what he wants to put and no matter how much it is They save several requests to the server

In Vue we have a package called Vue Debounce that allows just that simply in the event in this case of writing it allows you to add a wait or grace time as you want
To use it we have a couple of ways all the details simply like almost all components we have we can configure globally

import vueDebounce from 'vue-debounce'
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App)
app
 .directive('debounce', vueDebounce({ lock: true }))
 .mount('#app');

Or local to the component

<script setup>
import vueDebounce from 'vue-debounce'
const vDebounce = vueDebounce({ lock: true })
</script>

Im going to place it globally to the application or also here you have the local to the component if you want to place it local to the component and then we really use it it doesnt seem to me to be quite complex syntax for such a simple task But well its what there is here we configure it like this its the syntax theres not much to say here we place Debounce we indicate the time in this case I placed it 500 milliseconds but if you want to place 2000 3000 whatever you want or directly place it in seconds etc we place what the function is and the event that it has to use is simply overwriting the event that we already have you could say and its that simple just as I was telling you here you have another example of a second and this would be for the part of the events that we want to listen to which in this case would be the event of well here which is the one we implemented before for the rest and you can place any other event well well

Lets go there well obviously we have to stop the application here we place Im going to place here a

npm i vue-debounce

We hit enter and wait here for the best Well in the meantime Im going to go here duplicating this to leave it there as a reference I comment here I open the app here eh sorry Yes it would be this one here we have the Mount thats where we have to define it and here its already installed We come back here with the

import { vueDebounce } from 'vue-debounce'
//***
myApp
 .directive('debounce', vueDebounce ({ lock: true }))
 .mount(el);

First here to see I think I changed the name Thats what I wanted to see because remember that this is the previous documentation if now it is Vue the Debounce

Perfect here we already have the element that we have to import and here we use it before the mount we place the directive you can also copy it is what I would do but comma Vue Debounce we pass here the lock to true as we have the official documentation here This goes between braces it is an object we save and I think it is fine

Now we could use it so we go back here I am going to remove this and we use there the weird syntax that we have first we define I am going to put 500 milliseconds that is equal to the event

<!-- <TextInput autofocus @keyup="customSearch" class="w-full" type="text" placeholder="Search..." v-model="search" /> -->
<TextInput autofocus v-debounce.500ms="customSearch" :debounce-events="['keyup']" class="w-full" type="text" placeholder="Search..." v-model="search" />
En la cual, indicamos a cuál función queremos llamar pasado X tiempo:
v-debounce.500ms="customSearch"

Really the syntax is horrible it seems to me we put an array and of the parameters that we want to pass here notice that it is evaluating it and that is why we put two points because if not it would be a literal Stream then we want it to evaluate it here we put is the event that we want to listen to well we come back here and hope for the best here I am going to remove this there is a challenge could you implement a button to clear the filter and not do it manually like this I start writing and notice that it has been a while it sends and that would be the behavior clearly here it is filtering a demon but it is because of the term here you can see that it already works and here too and it is that easy to use so nothing without more to say we have already finished this class with this also this section so thanks for watching and lets go to the next class

04-10-2024 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• debounce, delay in events in Vue 3