debounce, retardo o retraso en los eventos en Vue 3

▶

Actualmente, el filtro local funciona de maravilla y es rápido, ya que opera en local (localhost). Sin embargo, si esta aplicación se conecta a internet, o está alojada en línea, tendrás problemas de rendimiento y eficiencia.

El problema principal es que estás enviando demasiadas peticiones al servidor: cada vez que escribes algo (cada pulsación de tecla), se envía un request. Esto no solo sobrecarga el servidor innecesariamente, sino que también puede trabar la aplicación, especialmente porque un filtro no requiere ser tan instantáneo.

⏳ La Solución: Implementar Debouncing

En estos casos, la práctica común es implementar el Debouncing. Esto consiste en introducir un tiempo de espera o margen de gracia después de que el usuario deja de escribir. La petición solo se envía cuando ha transcurrido ese tiempo, lo que permite al usuario escribir rápidamente su término completo y ahorra múltiples requests al servidor. .

Tenemos que usar un plugin como el siguiente:

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

El cual instalamos con:

$ npm i vue-debounce

️ Implementación Global con vue-debounce

Y configuramos:

resources/js/app.js

import vueDebounce from 'vue-debounce';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app
 .directive('debounce', vueDebounce({ lock: true })) // Se registra como una directiva llamada 'debounce'
 .mount('#app');

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 
    v-debounce.500ms="customSearch" 
    :debounce-events="['keyup']" 
    class="w-full" 
    type="text" 
    placeholder="Search..." 
    v-model="search" 
/>

Explicación de la Sintaxis

• v-debounce.500ms="customSearch": La parte clave. Indica que queremos llamar a la función customSearch después de que hayan pasado 500 milisegundos sin actividad.
• :debounce-events="['keyup']": Indica el evento que el plugin debe "escuchar" para iniciar la cuenta regresiva. En este caso, el evento es keyup (cuando se levanta la tecla).

Aunque puede ser aplicada a por ejemplo segundos:

v-debounce.1s="customSearch"

Y cuáles son los eventos que queremos escuchar:

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

Tras recargar la aplicación y empezar a escribir, notarás que la función de búsqueda (customSearch) solo se llama después de que has dejado de teclear por el tiempo especificado. Esto optimiza el proceso y reduce drásticamente las llamadas al servidor.

Ya con esto, completamos los filtros y campo de búsqueda aplicado a nuestra aplicación.