Asincronismo en JavaScript y Callbacks
Cargado por
Diego CañonAsincronismo en JavaScript y Callbacks
Cargado por
Diego CañonAsincronismo en JavaScript
ASINCRONISMO
La comunicación
con el Event Loop El Event Loop pasa el
es a través de Callback a la Pila (Call
mensajes Stack) cuando esta
Javascript es un lenguaje esta vacía.
de programación Ejecución I/O-Bound
asíncrono y no Callback_1 Callback_2
bloqueante, con un
manejador de eventos
conocido como Event
Loop, implementado en
un único hilo para sus
interfaces de entrada y
Función_3 MEMORIA
salida. (Callback_2)
Función_2
Ejecución CPU-Bound
Función_1
(Callback_1)
CASOS A CONSIDERAR
• Una aplicación con muchas funciones UPC-Bound que no vacía el Call Stack, sin posibilidad para
procesar los mensajes en el Event Loop.
• El numero de mensajes y callbacks supera la capacidad de procesamiento del Even Loop debido
a que hay demasiados eventos a la vez.
• Una función callback con procesamiento intensivo UPC-Bound, genera demora en la ejecución
de los mensajes en el Event Loop y demoras en las funciones a ejecutar que están en el Call
Stack.
Desarrollar en lo posible con muchas • I/O-Bound
funciones que ejecuten instrucciones Web Workers
rápidas y liberen el Call Stack rápidamente. • Procedimientos
EL TIEMPO EN JAVASCRIPT
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="[Link]"></script-->
<script>
[Link](`a`)
[Link](`b`)
[Link](`c`)
</script>
</body>
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="[Link]"></script-->
<script>
[Link](`a`)
setTimeout (function() {[Link](`b`)}, 4000)
[Link](`c`)
</script> 4000 milisegundos
</body>
setTimeout(() => [Link](`b`), 4000)
EL TIEMPO EN JAVASCRIPT
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="[Link]"></script-->
<script>
[Link](`a`)
setTimeout(() => [Link](`b`), 0)
[Link](`c`)
</script>
</body>
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="[Link]"></script-->
<script>
[Link](`a`)
setTimeout(() => [Link](`b`), 4000)
for (var i=0; i<10; i++){
[Link](i)
}
[Link](`c`)
</script>
</body>
Webpack -> npm
Linkedin. Migraron el backend
a [Link] consiguiendo
reducir de 30 servidores a tan
solo 3 servidores.
Ryan Lienhart Dahl
PREPARACIÓN DE PROYECTO
ESTRUCTURA DEL PROYECTO
FUNCIÓN CALLBACK
CALL BACK
const API_URL = '[Link]
const PEOPLE_URL = 'people/:id'
const lukeUrl = `${API_URL}${PEOPLE_URL.replace(`:id`,1)}`
const opcion = {crossDomain: true}
$.get(lukeUrl,opcion, function (luke){
[Link](`Hola yo soy ${[Link]}`)
})
[Link]
function get(URL, callback){
const xhr=new XMLHttpRequest ();
[Link] =function(){
const DONE =4
const OK = 200
if ([Link] === DONE){
if([Link] === OK){
callback(null, [Link](th
[Link]))
}else{
callback(new ERROR (`Se prod
ujo un error al realizar el request: ${this.
status}`))
}
}
[Link]('GET', URL);
[Link](null);
}
get('[Link] fun
ction onResponse (err, luke){
if(err) return [Link] (`Request fai
led: ${err}`)
[Link](`Request succeded`)
[Link]('luke',luke)
})
[Link]
XMLHttpRequest
[Link]
MLHttpRequest/Using_XMLHttpRequest
Callback Hell
[Link]
Promesas