debounce, retardo en los eventos
Un problema que tendríamos cuando pasemos la aplicación a producción, es que, cada vez que usamos el campo de búsqueda, veremos que automáticamente se dispara la petición al servidor, es decir, cada vez que el usuario escribe sobre dicho campo, se va enviando una petición, lo cual es muy ineficiente ya que, usualmente el usuario quiere colocar al menos una palabra para realizar la búsqueda, por lo tanto, lo ideal es, esperar al menos unos pocos milisegundos antes de enviar la petición, para eso, vamos a aplicar un retardo o debounce a dicho campo; Vue, no soporta de manera nativa esta característica, por lo tanto, tenemos que usar un plugin como el siguiente:
https://www.npmjs.com/package/vue-debounce
El cual instalamos con:
$ npm i vue-debounce
Y configuramos:
resources/js/app.js
import { vueDebounce } from 'vue-debounce'
//***
myApp
.directive('debounce', vueDebounce ({ lock: true }))
.mount(el);
Para usarlo, tenemos varias maneras como puedes revisar en la documentación oficial, pero, al interesarnos solamente aplicar en un solo campo, podemos usar la siguiente implementación:
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" />
En la cual, indicamos a cuál función queremos llamar pasado X tiempo:
v-debounce.500ms="customSearch"
Aunque puede ser aplicada a por ejemplo segundos:
v-debounce.1s="customSearch"
Y cuáles son los eventos que queremos escuchar:
:debounce-events="['keyup']"
Ahora, cada vez que escribamos algo, tarda medio segundo antes de enviar la petición, dando un tiempo prudencial para que el usuario termine de escribir.
Ya con esto, completamos los filtros y campo de búsqueda aplicado a nuestra aplicación.
Aquí la aplicación se pudiera decir que funciona de maravilla al menos este filtro Fíjate lo rapidito que funciona y es porque está en local Claro está si es una aplicación que vas a tener local a tu Bueno aquí no sé qué pasó pero si es una aplicación que va a funcionar local a tu empresa o a tu proyecto lo que tú quieras no tuvieras problema porque todo se funciona localhost tal cual lo tenemos pero si se va a conectar a Internet o la aplicación está lo internet mejor dicho ahí sí puedes tener algunos problemas porque estás enviando muchas peticiones básicamente cada vez que escribes algo fíjate que a veces también se traba un poco cada vez que escribes algo estás enviando una petición cosa que usualmente sería innecesario porque tampoco hay necesidad de un filtro tan específico no que funcione de esa forma aparte de lo ineficiente y ya lo que todos nosotros conocemos entonces en estos casos lo que se tiende a hacer es simplemente dejar cuando empieza el usuario a escribir dejar cierto margen o tiempo de espera y a partir de ese tiempo de espera es que se envía la petición y esto le da chance al usuario de que bueno puede escribir aquí rapidito qué es lo que quiere colocar y por más que sea se ahorran varios request al servidor.
En Vue tenemos uno llamado un paquete llamado Vue Debounce que permite justamente eso simplemente en el evento en este caso de escritura permite agregar un tiempo de espera o de gracia como lo quieras.
Para emplearlo, tenemos un par de maneras, todo el detalle simplemente como casi todos componentes tenemos lo podemos configurar de manera global:
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');
O local al componente:
<script setup>
import vueDebounce from 'vue-debounce'
const vDebounce = vueDebounce({ lock: true })
</script>
Yo lo voy a colocar de manera global a la aplicación o también otra vez aquí tienes el local al componente si lo quieres colocar local al componente y luego lo empleamos realmente no me me parece bastante entre comillas compleja la sintaxis para una tarea tan sencilla Pero bueno es lo que hay aquí lo configuramos así es la sintaxis no hay mucho que decir aquí colocamos Debounce indicamos el tiempo en este caso coloqué fue 500 milisegundos pero si quieres colocar 2000 3000 lo que tú quieras o directamente lo colocas en segundo etcétera colocamos tal cuál es la función y el evento que tiene que emplear simplemente está sobrescribiendo el evento que ya tenemos se pudiera decir y es así de simple tal cual te comentaba aquí tienes otro ejemplo de un segundo y este sería para la parte de los eventos que queremos escuchar que en este caso sería el evento de bueno aquí que es el que implementamos antes por lo demás y puedes colocar cualquier otro evento bueno bien.
Vamos a allá bueno obviamente tenemos que detener aquí la aplicación colocamos voy a colocar aquí un:
npm i vue-debounce
Damos un enter y esperamos aquí lo mejor bueno Mientras tanto voy a ir aquí duplicando esto para dejarlo ahí de referencia comento acá abro aquí el app eh perdón el Sí sería este aquí tenemos el dem Mount es donde lo tenemos que definir y por aquí ya aquí se instaló volvemos aquí con el
import { vueDebounce } from 'vue-debounce'
//***
myApp
.directive('debounce', vueDebounce ({ lock: true }))
.mount(el);
Primero aquí para ver creo que cambie el nombre Eso es lo que quería ver porque recuerda que este es la documentación anterior si ahora es Vue the Debounce
Perfecto aquí ya tenemos el elemento que tenemos que importar y aquí lo empleamos antes del mount colocamos directiva también puedes copiarlo es lo que yo haría pero coma Vue Debounce le pasamos aquí el de lock en true tal cual tenemos la documentación oficial aquí Esto va entre llaves es un objeto guardamos y creo que está bien.
Ahora ya lo pudiéramos emplear así que regresamos acá voy a quitar esto y empleamos ahí la sintaxis toda rara que tenemos primero definimos voy a colocar 500 milisegundos que sea igual al evento:
<!-- <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"
Realmente la sintaxis es horrible me parece colocamos una arra y de los parámetros que le queremos pasar aquí fíjate que lo está evaluando y es por eso que colocamos dos puntos porque si no sería un Stream literal entonces queremos que lo evalúe aquí colocamos es el evento que queremos bueno escuchar en fin regresamos acá y esperamos lo mejor aquí voy a quitar esto hay como reto pudieras implementar un botón para limpiar el filtro y no hacerlo así de manera manual empiezo a escribir y fíjate que ha pasado un tiempo es que envía y eso sería el comportamiento claro aquí está filtrando un demonio pero es por el término aquí puedes ver que ya funciona y aquí también y es así de fácil su uso así que pues nada sin más que decir ya terminamos esta clase ya con esto también esta sección así que gracias por ver y vamos a la siguiente clase.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
Acepto recibir anuncios de interes sobre este Blog.
!Cursos desde!
4$
En Academia
Ver los cursos!Libros desde!
1$
Ver los libros