"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Optimizar los Eventos de jQuery con Lodash

Hoy vamos a aprender a optimizar los Eventos de jQuery con Lodash, si es precisamente esto lo que estabas buscando pero no sabes que es lodash te recomiendo que leas este a post, y si simplemente estabas navegando y te ha llamando la atención este post pero no comprender del todo a que me refiero con los eventos visita también este otro.

Puestos una vez en contexto os preguntareis como pretendo optimizar los eventos de jQuery, puede llamar la atención pues si jQuery es una librería creada y mantenida por programadores de talla mundial y que tiene un recorrido de años ¿como voy yo a optimizar nada ahí?

 

Por supuesto cuando hablo de optimizar sus eventos no estoy hablando de optimizar esta librería, sino de optimizar nuestro código en este caso usando otra librería más que se combina perfectamente y que no es otra que Lodash.

Haz click aquí para visitar su página oficial.

¿Que eventos puedo optimizar?

Podemos buscar eventos que ejecuten funciones que tengan un gran impacto en el rendimiento en la aplicación, es decir que tengan una lógica compleja que carguen mucho de operaciones el equipo y le lleve tiempo procesar.

Si queremos investigar cuales son podemos mirar los registros de rendimiento que los navegadores proporcionan para saber cuanto tiempo tarda una función en llevarse a cabo, algunas funciones tardan tanto en ejecutarse que incluso a ojo podemos deducir cuales son.

Un caso claro de un evento que podemos optimizar es un botón que al clicar sobre el tiene una lógica que tarda medio segundo en ejecutarse, o que es asíncrona y tarda mas o menos ese tiempo en responder.

No parece la muerte de nadie pero ¿que pasa si un usuario se pone a clicar como un loco encima de ese botón? (no des por hecho que los usuarios van a usar la aplicación como tu quieres que lo hagan).

Pues pasa que si ha clicado 5 veces en un segundo la función se ha ejecutado 5 veces y estamos cargando la CPU o haciendo peticiones de forma innecesaria.

¿Como puedo optimizarlos?

Muchos estaréis pensando, pues que tontería usando variables para controlar el flujo y funciones de callback, y es cierto que esta es un manera correcta que incluso podría ser la única forma de hacerlo en algunos casos, pero con lodash podemos usar unas funciones que muchas veces serán suficientes.

Estoy hablando de las funciones Throttle y Debounce.

Ambas funciones son para entenderlo de forma sencilla contadores que impiden que su código se ejecute de nuevo hasta que pase cierto tiempo.

Por ejemplo en el supuesto anterior de un botón que al clicar ejecuta una función que tarda medio segundo en completarse, si la encapsulamos en una de estas funciones y marcamos el valor de estos contadores en 1 segundo, aunque el usuario se ponga a pulsar sobre el botón como un loco te aseguras de que como máximo esa aplicación se llamará solo una vez por segundo.

Es una forma estupenda de optimizar ciertos eventos pues evitamos que los usuario puedan saturar una web a base de repetir eventos como pulsaciones en teclado o en el ratón principalmente.

¿Diferencias entre Throttle y Debounce?

Claro está que aunque nos refiramos a ambos como contadores para controlar el numero de ejecuciones de código, en algo tienen que diferenciarse sino serían la misma función.

La diferencia que presentan es la capacidad que tiene Debounce para resetear ese contador.

Throttle no resetea el contador, es decir si hemos marcado 1 segundo como valor, una vez ejecutada espera 1 segundo para permitir otra ejecución.
Aquí os dejo una gráfica que lo explica.

 

Throttle

 
Debounce resetea el contador cada vez que la llamamos, por lo que si al igual que antes marcamos 1 segundo como valor, la aplicación espera un segundo desde la última pulsación para permitir otra ejecución.

Por lo que si antes que pase ese segundo se nos ocurre ejecutarla el contador vuelve a ponerse en 0 y hay que volver a esperar un segundo entero desde ese instante.

Esta es la gráfica que corresponde a la esta función.

 

Debounce

 

¿Como optimizo mis eventos con Lodash?

Una vez visto para que sirven estas dos funciones lo único que tenemos que hacer es escoger la que mejor nos sirva y aplicarla en nuestro código de esta manera.

Volviendo al clásico evento de clicar sobre un botón, este sería el código:

No tiene mayor dificultad entender este código y ahora veamos como implementar la función de lodash para optimizar este evento, está claro que cuanto más costosa en términos de rendimiento sea la lógica más estaremos optimizando el evento.

El código aplicando el método que explico sería así….

Lo que acabamos de conseguir con esto es que nuestro evento no pueda ser llamado de nuevo hasta pasado un segundo desde su última ejecución.

Y si hubiera puesto un debounce el evento no podría ser llamado de nuevo hasta pasado un segundo desde la última vez que pulse sobre el elemento.

De esta forma tan sencilla podemos en muchos casos mejorar el rendimiento de nuestras aplicaciones, espero que os ayude en vuestros desarrollos y un saludo!

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)