VueJS

Debounce con Vue

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript.

Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio.

Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue.

¿Qué es debounce?

No voy a profundizar en lo que este tipo de función hace, ya que solo me centraré en su implementación dentro de Vue, pero básicamente esta función solo se ejecutará una vez en determinado límite de tiempo sin importar cuántas veces se invoque.

Tenemos el ejemplo más simple: un campo de formulario en donde buscamos datos del servidor tan pronto el usuario escribe en el evento keyup.

Cada que el usuario presiona una tecla, el evento se desencadena, causando que se hagan muchas llamadas al servidor (cuando en realidad todavía ni se ha acabado de escribir).

Justo aquí viene debounce al rescate, pues permite definir que la llamada a la función solo se ejecute una vez en, por ejemplo, medio segundo, sin importar cuántas veces fue invocada.

Así que con nuestro ejemplo vamos a poder lograr que aunque el usuario escriba 5 caracteres (invocando 5 veces a la función) la misma solo se ejecute N milisegundos después de la última tecla presionada.

Y esto fue con un ejemplo de teclas, obviamente puede ser aplicado en varios casos. Pero bueno vamos al grano.

Definiendo debounce

Primero debemos definir la función que regresará la función debounce. Así como lo lees: esta función va a regresar una función.

Hay varias implementaciones, yo usaré la siguiente:

const debounce = (callback, wait) => {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback(...args);
    }, wait);
  };
};

Esto debe estar definido en tu componente, pero fuera de los métodos de Vue.

Y ahora al definir el método de Vue no lo vas a definir normalmente, sino que vas a usar al evento created para hacerlo, ya que debemos asignarlo a lo que la función debounce regrese. Además, con esto vamos a poder acceder a this.

Nota: si no te funciona al hacerlo en el ciclo created, hazlo en el mounted.

created() {
    this.realizarBusqueda = debounce(() => {
        console.log("Realizamos la búsqueda!");
    }, 500);
}

Fíjate en que estoy definiendo la función llamada realizarBusqueda pero no dentro de methods, sino dentro del método mounted según lo que devuelva debounce.

Lo único que hará es imprimir en la consola después de medio segundo.

Ejemplo de debounce con Vue

Tengo un input como lo dije anteriormente:

<input v-model="busqueda" type="text" @keyup="realizarBusqueda()">

En su evento keyup va a invocar a la función realizarBusqueda, definida anteriormente. Y el código completo queda así:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce con Vue - By Parzibyte</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <input v-model="busqueda" type="text" @keyup="realizarBusqueda()">
    </div>
    <script>
        const debounce = (callback, wait) => {
            let timerId;
            return (...args) => {
                clearTimeout(timerId);
                timerId = setTimeout(() => {
                    callback(...args);
                }, wait);
            };
        };
        new Vue({
            el: "#app",
            data: () => ({
                busqueda: "",
            }),
            created() {
                this.realizarBusqueda = debounce(() => {
                    console.log("Realizamos la búsqueda!");
                }, 500);
            }
        });
    </script>
</body>

</html>

Si quieres puedes probarlo en este enlace, solo debes escribir en el input y observar la consola de depuración.

Para terminar el post te dejo más tutoriales de programación en JavaScript y Vue.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/