No generes un cuello de botella en el EventLoop

Clase 24 de 51 • Fundamentos de JavaScript 2017

Resumen

¿Cómo ejecuta JavaScript el código?

Lo primero que se ejecuta es la declaración de las funciones.
Cuando JavaScript ejecuta una línea la carga en una pila de ejecución.

JavaScript solo ejecuta una cosa a la vez, por esto, debemos tenerla lo más limpia posible.

Sin embargo, puede delegar la ejecución de otras cosas.

Itzel

student•

su letra me enredó, me quedé pensando que fea letra todo el tiempo hahaha

Jose Manuel Montaño Saenz

student•

se medio entiende xd

Afu Tse

student•

Mucho teclado

Michael Bolaños Vargas

student•

Porque usar una pizarra virtual? realmente se vio enredado el ejemplo. Hubiera sido mejor la consola de Chrome y ponerle un breakpoint e ir paso a paso debbugeando.

Diego Forero

Team Platzi•

El concepto de pila es mas sencillo de entender de una manera gráfica, tienes que considerar que hay personas para las que este concepto es completamente nuevo.

Edgardo T

student•

La pizarra es buena, pero para clases de este tipo sobre todo de paga, deberia trabajarse una animación que complemente esto. Realmente el uso del marcador en tablet a mano alzada siempre da problemas y es algo que platzi ya experimento antes. Este es mi feedback como usuario y cliente por supuesto.

Gerardo Ramones

student•

En ambos casos retorno “medio” al final, solo que en el primero se tardo en responder (el tiempo asignado), en el último caso respondió inmediatamente después del “Adios”.

console.log('Hola!')

setTimeout(function() {
	console.log('medio...')
}, 0)
console.log('Adios')```

Jonathan Araujo

student•

Esto les ayudara a entender mejor este seccion (Procesos Asíncronos):

Los procesos asíncronos son aquellos en los que el proceso de ejecución se produce en diferentes tiempos.

Por ejemplo: En un trabajo colaborativo un empleado deja mensaje para que los miembros del grupo cuando dispongan de tiempo lo miren y dejen sus comentarios o respuestas, pero mientras el usuario seguirá haciendo el resto de sus trabajos pendientes.

Los procesos síncronos son aquellos los cuales se ejecutan uno detrás de otro y hasta que el proceso actual no finalice su ejecución no se pasará a ejecutar el siguiente proceso.

Por ejemplo: ¿Quien quiere ser millonario?, aquí el presentador realiza un pregunta, posteriormente el participante debera responder cada pregunta y hasta que esa pregunta no haya finalizado el presentador no proseguirá a realizar otra pregunta.

Julio J Yépez

student•

El orden de procesamiento de las tareas en la call stack (min 05:27) está determinado por un método de priorización en el manejo de colas, que se llama: LIFO (Last In First Out), que le indica al procesador ejecutar las tareas (o los procesos) más recientemente incorporados de primero (Última en Entrar es la Primera en Salir).

Diego Forero

Team Platzi•

Mas exactamente el manejo de cola LIFO es conocido como PILA y COLA es FIFO Fisrt In Fist Out

Julio J Yépez

student•

Correcto.

En otras palabras: Se usa LIFO cuando se refier al trabajo con PILAS como torres de platos … en la forma explicada en el video y el comentario anterior.

… y FIFO cuando se refiere a COLAS, donde el primero que “entra” es el primero que “sale” (como en las colas de un banco)

… son dos métodos diferentes para dos tipos de procesamientos diferentes … en JS el procesamiento es por PILAS por lo que el método es LIFO

Victor Ferreira

student•

Perdón por lo impertinente, pero seria mejor un usar unas imágenes o diapositiva para potenciar la explicación, por que con esta técnica me costo

Wilson Montenegro

student•

Veo que Sacha tiene una hermosa letra igual que la mía.

José Tuzinkievicz

student•

El alter ego de Sacha es médico :p

Juan Jose Aparicio Aparicio

student•

La mia es igual jajaja, Paradoja si tu letra no es igual es porque te falta usar mas el teclado jajajaja.

Ada Parra

student•

Siempre me preguntaba como era el proceso de ejecución cuando usaba el setTimeout(). Excelente explicación. Los programadores de verdad debemos mantener la pila vacía.

Victor Riveros

student•

Creo que para ser programador, un requisito fundamental es tener fea letra. jaja
Muy bien explicado el tema

Victor Riveros

student•

Pd: Ahora quiero un Ipad 😄

Rodrigo Andres Ramirez Trujillo

student•

Yo me siento muy identificado con ello, mi letra es horrible, jejejejeje

Karen Cubero

student•

console.log('first');
setTimeout(function(){console.log('timeout')}, 5000);
console.log('last');

Resultado:

first
last
undefined
inside

Jose Manuel Montaño Saenz

student•

pasa exactamente lo que dice sacha, el mensaje del medio se toma el tiempo de alrededor de 2 seg, imagino es el tiempo que tarda en pasar a la pila y ejecutarse de nuevo

console.log("hola")
setTimeout(function(){
	console.log("medio")
},0)
console.log("Chao")

Resultado:

hola
Chao
undefined
medio

José Molina

student•

El callstack es como un bote de pringles, el primero que tomas es el último que se metió en el bote 😛
Queda claro como funciona, solo quisiera entender bien si es a partir que el callstack se vacia es cuando se empiezan a ejecutar cada una de las tareas ingresadas al web API 😮

Jose Enrique Marquez

student•

Apoyo a los demás comentarios pienso usar esa pizarra no es lo mas adecuado para explicar esta clase.

Victor Cerriteño

student•

muy interesante el ejercicio propuesto por sacha ya sabia que la funcion setTimeout funciona de forma tal que se ejecuta no en el tiempo preciso que se selecciona sino que despues del tiempo es ingresado en la cola de ejecucion lo antes posible pero nunca pense que al ponerlo en 0 es una forma increible de generar funciones “asincronas”

Noé Muñoz

student•

Es muy interesante saber que JS solo realiza un proceso a la vez, ya que esto te “orienta”.

Manuel Venegas

student•

Excelente idea explicarlo dibujando. Se entiende muy bien el cómo se trabaja con la pila de ejecución. El único problema es cuando escriben de esta manera texto, ya que no es tan legible.

Pero buen material. Corto y preciso.

Carlos Andrés Millan Satizabal

student•

muy bien explicado!!

Jose Manuel Montaño Saenz

student•

existe un limite para la pila de ejecución?

Alejandro Sanabria

Team Platzi•

La memoria ram es el limite.

Jhan Karlo Santa Maria Calderón

student•

console.log("hola")
setTimeout(function(){
	console.log("medio")
},0)
console.log("Chao")

hola
Chao
undefined
medio

Juan Camilo Angel Fandiño

student•

Buen video

No generes un cuello de botella en el EventLoop

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial