Cómo funciona el tiempo en JavaScript

Clase 31 de 55 • Fundamentos de JavaScript 2018

Resumen

En principio, cualquier tarea que se haya delegado al navegador a través de un callback, deberá esperar hasta que todas las instrucciones del programa principal se hayan ejecutado. Por esta razón el tiempo de espera definido en funciones como setTimeout, no garantizan que el callback se ejecute en ese tiempo exactamente, sino en cualquier momento a partir de allí, sólo cuando la cola de tareas se haya vaciado.

Ivan Santiago

student•

‘No voy a bloquear el Event Loop’ 😄

Luis Fernando Rodriguez

student•

Yo tampoco!! Jajaja

Javier Serrano Lule

student•

Yo menos! XD jajaja

Jorge Delfino

student•

13 de septiembre de 2018, la d aun no aparece…

Efrén Sánchez

student•

8 de octubre de 2018. Sigue sin aparecer… XD

José María Cuevas Ramírez

student•

Bitácora del capitán: 22 de octubre de 2018, por un momento pensé haber visto la d, pero no; sigue sin aparecer.

Denis Cordero

student•

Clase 50 😱 que paso íbamos en la 26 XD

Esteban Ciudad

student•

me pregunto lo mismo, hay algun curso mas completo que este?

Carlos Gómez Mont

student•

😮

Leniel Luzardo

student•

Asi lo entendi yo por si a alguien le sirve😁

Marta Lucía García Oliva

student•

Excelente Leniel, gracias por compartir!

Carlos Olivares

student•

Gracias por el aporte!

Pablo Andres

student•

Resumen de la clase

Tiempos y prioridades de ejecución en JS:

Dados los siguientes console.logs, ‘a’, ‘b’ y ‘c’, los resultados son en orden e inmediatos; estarán en orden en el EventLoop.

	console.log(`a`)
	console.log(`b`)
	console.log(`c`)

	// a
	// b
	// c

Si genero un callBack a partir de un setTimeout(), el browser toma la petición y después del tiempo estipulado se dispara el console.log.

	console.log(`a`)
	setTimeoun(()=> console.log(`b`), 2000)
	console.log(`c`)

	// a
	// c

	// b [2 segundos después]

Si genero otro setTimeout, pero con un tiempo = 0, el callBack será generado de todas maneras por la función setTimeout y el console.log será disparado al finalizar el EventLoop de nuestro programa, cuando está listo para revisar la cola de tareas.

	console.log(`a`)
	setTimeout(()=> console.log(`b`), 0)
	console.log(`c`)

	// a
	// c

	// b [después de finalizado el EventLoop]

Esto puede verse más claramente si generamos un loop for que demore un tiempo evidente y mayor al seteado en el callBack.
El tiempo configurado para el setTimeout es de 2000 milisegundos, como mínimo 2000 milisegundos, ya que el console.log funcionará después de que el for termine su proceso.

	setTimeout(() =>console.log(`b`), 2000)
	for(var i = 0; i < 10000000000; i++){}

Tatiana Karina Valencia Hernández

student•

Muy bueno, gracias

Britney Hadassa Ascencio Henriquez

student•

Buen resumen

Willy David Da Conceicao Lozada

student•

DALE LIKE, Y COMENTA SI NO TE GUSTAN LOS APUNTES O SI NO IGUAL COMENTA "Mas super apuntes xD": ![](

Luis Felipe Medina Rodriguez

student•

fino

Alexis Olveres

student•

Es muy fácil, recuerden que Javascript primero ejecuta todo el código sincrono y después todo lo asíncrono.

Aun cuando en nuestras lineas de código primero este lo asíncrono o mezclado como muestra la clase.

Primero lo sincrono, luego lo asíncrono.

Can Chen

student•

Después de esta clase he evolucionado de ser "novato" a ser "un poco menos novato". XD

Matias Guillermo Sticchi

student•

No voy a bloquear el event loop
(Listo ya cumpli!)
Ahora va mi pregunta…
Si console.log() es una función y se ejecuta en el hilo principal y SetTimeout() también es una función pero se encola para ser ejecutada, como sabemos que funciones javascript se encolan y cuales ejecutan directamente?

Facundo Nicolás García Martoni

teacher•

Gran pregunta 🤔 algún alma noble que la responda?

Patricio Nicanor Cabrera

student•

Porque setTimeOut estaría haciendo callBack... La función console.log(' ') está siendo llamada inmediatamente. setTimeOut( function(){}, 2000 ) es llamada al instante también, pero la función que hay dentro de esta función es callback y será enviada a la cola de tareas una vez pasen los 2 segundos. Lo que hay en la cola de tareas va a ser ejecutado una vez que JavaScript finalice la pila de ejecución principal.

En sintesis, sabremos que la función será demorada cuando hagamos un callback. Que es una función que tenga como argumento otra función. Es decir que se requiere el resultado de la función b para completar a.

Rulo Code

student•

Hola gente ! :D Como Sacha lo ha dicho, entender el asincronismo del lenguaje es lo que separa a los Amateurs de los PRO. Si quedas con alguna duda a partir de esta clase PARA! Y no dudes en consultar mi tutorial, lo hice con mucho cariño para ustedes :3

https://platzi.com/tutoriales/1339-fundamentos-javascript/4255-entendiendolo-todo-asincronismo-y-callbacks/

José Gregorio Block

company_admin•

#Nice

Gionatan Paolo Peña Carrasco

student•

Realmente un valioso aporte!

Odalys Paz

student•

En mi caso para entender mejor esto me apoye de esta herramienta y asi poder visualizar lo que Sacha explicaba en el video.

Jenner Orozco

student•

Este vídeo te ayudara a comprender el BUG que salga en la clase Iluminando la secuencia de colores , mucho ojo a esto.

José María Cuevas Ramírez

student•

¿Alguien sabe por qué cuando ejecute el código de la letra “d” la consola me regresa un 1?

Starling Mercedes

student•

la verdad yo tambien tengo la duda ,no se que significa, si haces el console.log(“d”) sin el setTimeout te regresa la D + undefined en ves de un numero hmmm, que sera ese < . en chrome.

Luciano Joaquín Albanés

student•

Creo que el número en la respuesta de la consola hace referencia a la posición de la función en la “pila de ejecución”, ya que si seguimos agregando más funciones con setTimeout, el número de la respuesta irá aumentando de uno en uno.

Es mi interpretación, puede ser errónea.

Victor Juan Morales Romo

student•

Que pedo que pedo? Si estaba en clase 26 salio el video de youtube de la introduccion y luego me mando aqui a la clase 50 y en el curso dice 30whats que esta pasando doctor Garzia.

Christian Beltran

student•

sigo esperando por mi d

Ginnio Sarabia

student•

6 dias despues y aun no sale jajajaj

MICHAEL ANDRES MIER PITO

student•

un mes despues y nada ajaaj

Juan Manuel Hernandez Marcano

student•

definitivamente soy un dev que esta aprendiendo todavia y esta clase me parecio significativa

Luis Abdel Rangel Castro

student•

Javascript primero ejecuta todo el código sincrono y después todo lo asíncrono. Aun cuando en nuestras lineas de código primero este lo asíncrono o mezclado como muestra la clase. Primero lo sincrono, luego lo asíncrono.

Pila de Tareas = Sicrono Cola de Tareas = Asincrono

Ejecuta todo lo que esta en Pila de Tareas. Cuando ya no tenga nada en Pila de Tareas. Empieza a ejecutar lo que en Cola de Tareas.