Sé que los temporizadores han sido durante un tiempo una característica que mucha gente usa en sus tareas diarias. En el mundo de JavaScript, los temporizadores a menudo se implementan con las funciones setTimeout o setInterval, la mala noticia para ti si lo estás haciendo es que no es una buena práctica e intentaré explicar por qué.

Antes de comenzar a explicar mi pensamiento, tengo una pregunta para ti: ¿puedes usar un reloj que indique la hora equivocada?

Si tu respuesta es sí, lamento haberte hecho perder tu valioso tiempo porque este artículo no te pertenece.

Por otro lado, si tu respuesta es negativa, te explicaré por qué usar setTimeout o setInterval es como usar un reloj dañado para obtener la hora.

El problema con estas funciones.

Para comenzar, consideremos el siguiente fragmento

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i 


si ejecuta este fragmento en la consola de su navegador, obtendrá el siguiente resultado 



Este comportamiento se debe al hecho de que setTimeout está agregando la devolución de llamada en la cola del navegador para que la procese una vez que esté inactivo (no tiene una tarea que hacer) en otras palabras, la devolución de llamada pasado al setTimeout tiene baja prioridad

 Ahora, sabiendo esto, imagino que te resultará difícil implementar temporizadores usando la función setTimeout porque puedes tener 2 o incluso 10 ticks (dependiendo de qué tan ocupado esté tu navegador) al mismo tiempo. Será una pesadilla depurar esto, pero ¿tenemos una solución mejor?

  
  
  Una forma de evitar estas funciones.


Para proporcionar una mejor manera de implementar temporizadores, debemos usar la función requestAnimationFrame porque le dice al navegador que ejecute una devolución de llamada antes de la siguiente pintura (en otras palabras, antes de que ocurra cualquier cambio en la interfaz de usuario)

La diferencia aquí es bastante sutil, por lo que es mejor entenderla a través del código. Retomemos nuestro fragmento anterior y modifiquemos un poco para comparar setTimeout y requestAnimationFrame

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


En este ejemplo, podemos ver que cuando se ejecuta en Chrome, setTimeout se ejecuta antes de requestAnimationFrame (aunque en algunos casos raros ocurre lo contrario)



Pero si lo ejecutas en Firefox, este será el resultado



Esto puede parecer confuso, pero si prestas un poco de atención, te darás cuenta de que no se realiza ninguna pintura durante la ejecución, por lo que la forma en que se maneja este escenario depende del navegador.

Ahora, si podemos modificar nuestro fragmento para que el navegador vuelva a pintar la página, veamos qué sucederá

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


Aquí está el resultado en Chrome



Y aquí está el resultado en Firefox



Como puede ver en los registros, cuando el navegador realiza cambios en la interfaz de usuario, la función requestAnimationFrame siempre tendrá prioridad sobre otras devoluciones de llamada programadas.

Dado que en la web realizamos repintados constantemente, requestAnimationFrame es una opción obvia para implementar temporizadores.

  
  
  Comprender la función requestAnimationFrame


La función solo toma una devolución de llamada como parámetro. Para proporcionar contexto a la devolución de llamada, debe tomar una marca de tiempo que indique la hora en la que finalizó el fotograma anterior según la hora de la representación inicial de la página.

La función devolverá un número entero que representa el identificador de la solicitud, esto puede ser útil si desea cancelar la solicitud con la función cancelAnimationFrame.

  
  
  Una implementación simple de un cronómetro en JavaScript


Para implementar un cronómetro, existen algunos requisitos:

• Deberíamos saber después de qué cantidad de tiempo debería marcar (generalmente un segundo)
• Debemos saber el retraso de tiempo después del cual el cronómetro debería dejar de funcionar
• Los intervalos de tictac deben ser menores que el retraso

Teniendo en cuenta todos estos requisitos, el siguiente fragmento de código creará un cronómetro para usted

Outro

Sé que puede que haya sido una lectura larga, pero creo que la has disfrutado. De todos modos, si tienes alguna pregunta o sugerencia, no dudes en comunicarte conmigo.

¿Gracias por leerlo y adiós?