Ayer estaba hablando con un amigo que esta haciendo entrevistas en Silicon Valley, y me comentó que le pidieron programar un #throttle.
Este concepto es común que salga en la entrevista especializada de #frontend / #javascript.
Qué es #throttle? Un ⚡️ #Thread
[1/x]
Este concepto es común que salga en la entrevista especializada de #frontend / #javascript.
Qué es #throttle? Un ⚡️ #Thread
[1/x]
La semana pasada hablamos de #debounce. #throttle es una función hermana de esta.
Throttle es una función que recibe 2 args: la función a ejecutar y un tiempo de bloqueo.
Cuando la función se ejecuta, el tiempo comienza a correr y bloquea cualquier otra ejecución.
Throttle es una función que recibe 2 args: la función a ejecutar y un tiempo de bloqueo.
Cuando la función se ejecuta, el tiempo comienza a correr y bloquea cualquier otra ejecución.
Veamos el problema!
Tenemos una función que imprime texto en la consola.
El entrevistador solamente dirá: "ok, programa un throttle"
Si no sabes que es un throttle, te lo explicará. Pero son puntos menos, cuidado! 🚨
Throttle y debounce son tools básicas para todo frontend.
Tenemos una función que imprime texto en la consola.
El entrevistador solamente dirá: "ok, programa un throttle"
Si no sabes que es un throttle, te lo explicará. Pero son puntos menos, cuidado! 🚨
Throttle y debounce son tools básicas para todo frontend.
Este es el problema:
- Tenemos una función logger, que imprime el texto en consola
- La función es llamada muchas veces!
- Queremos bloquear las llamadas de la función por 200ms.
Antes de continuar, se te ocurre una forma de hacer esto?
- Tenemos una función logger, que imprime el texto en consola
- La función es llamada muchas veces!
- Queremos bloquear las llamadas de la función por 200ms.
Antes de continuar, se te ocurre una forma de hacer esto?
#throttle al rescate!
Para bloquear la llamada, un setTimeout sera más que suficiente. Y podemos asignar su existencia a una variable para estar al tanto de si esta corriendo el tiempo y evitar ejecutar la función en caso de que sea llamada.
Pongamos todo junto.
Para bloquear la llamada, un setTimeout sera más que suficiente. Y podemos asignar su existencia a una variable para estar al tanto de si esta corriendo el tiempo y evitar ejecutar la función en caso de que sea llamada.
Pongamos todo junto.
Paso a paso
- Usamos throttle y creamos una nueva función con los args logger y el tiempo de bloqueo: 200ms
- Usamos esta nueva función
- Y como vemos en la consola: solo se imprimen dos valores. Los demás no pudieron porque intentaron correr cuando la función estaba bloqueada.
- Usamos throttle y creamos una nueva función con los args logger y el tiempo de bloqueo: 200ms
- Usamos esta nueva función
- Y como vemos en la consola: solo se imprimen dos valores. Los demás no pudieron porque intentaron correr cuando la función estaba bloqueada.
Ahora bien: para que sirve throttle en la vida real?
Para muchísimas cosas, sobretodo de performance!
Un caso muy común es en el evento scroll. Este evento se dispara muchísimas veces, y si tienes animaciones que dependan de este evento, puedes perder FPS.
Para muchísimas cosas, sobretodo de performance!
Un caso muy común es en el evento scroll. Este evento se dispara muchísimas veces, y si tienes animaciones que dependan de este evento, puedes perder FPS.
Usando throttle, puedes bloquear el callback del scroll cada cierto tiempo, en la suposición de que tantas llamadas no te van a dar datos significativos para animar algo (por ejemplo, animar un header!)
Este tipo de ejercicios prueban dos cosas:
- Tu experiencia práctica siendo FrontEnd
- Descubrir si conoces como funcionan las herramientas del día a día (porque debounce y throttle vienen incluidas en #lodash)
- Tu experiencia práctica siendo FrontEnd
- Descubrir si conoces como funcionan las herramientas del día a día (porque debounce y throttle vienen incluidas en #lodash)
Nos vemos pronto en otro thread de "Entrevistas para #javascript developers en #FAANG"!
• • •
Missing some Tweet in this thread? You can try to
force a refresh
