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:

See the gist on github.

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.

See the gist on github.

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:

See the gist on github.

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

See the gist on github.

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.