JavaScript asíncrono
"¡Terminaré más tarde!"
Las funciones que se ejecutan en paralelo con otras funciones se denominan asincrónicas.
Un buen ejemplo es JavaScript setTimeout()
JavaScript asíncrono
Los ejemplos utilizados en el capítulo anterior, fue muy simplificado.
El propósito de los ejemplos era demostrar la sintaxis de las funciones de devolución de llamada:
Ejemplo
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
En el ejemplo anterior, myDisplayeres el nombre de una función.
Se pasa a myCalculator()como un argumento.
En el mundo real, las devoluciones de llamada se usan con mayor frecuencia con funciones asíncronas.
Un ejemplo típico es JavaScript setTimeout().
Esperando un tiempo de espera
Al usar la función de JavaScript setTimeout(), puede especificar una función de devolución de llamada para que se ejecute en el tiempo de espera:
Ejemplo
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
En el ejemplo anterior, myFunctionse utiliza como devolución de llamada.
myFunctionse pasa a setTimeout()como un argumento.
3000 es el número de milisegundos antes del tiempo de espera, por
myFunction()lo que se llamará después de 3 segundos.
Cuando pase una función como argumento, recuerde no usar paréntesis.
Derecha: setTimeout(myFunction, 3000);
Incorrecto:setTimeout(miFunción(), 3000);
En lugar de pasar el nombre de una función como argumento a otra función, siempre puedes pasar una función completa en su lugar:
Ejemplo
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
En el ejemplo anterior, function(){ myFunction("I love You !!!"); }
se utiliza como devolución de llamada. Es una función completa. La función completa se pasa a setTimeout() como argumento.
3000 es el número de milisegundos antes del tiempo de espera, por
myFunction()lo que se llamará después de 3 segundos.
Intervalos de espera:
Al usar la función de JavaScript setInterval(), puede especificar una función de devolución de llamada que se ejecutará para cada intervalo:
Ejemplo
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
En el ejemplo anterior, myFunctionse utiliza como devolución de llamada.
myFunctionse pasa a setInterval()como un argumento.
1000 es el número de milisegundos entre intervalos, por
myFunction()lo que se llamará cada segundo.
Esperando Archivos
Si crea una función para cargar un recurso externo (como un script o un archivo), no puede usar el contenido antes de que esté completamente cargado.
Este es el momento perfecto para usar una devolución de llamada.
Este ejemplo carga un archivo HTML ( mycar.html) y muestra el archivo HTML en una página web, después de que el archivo esté completamente cargado:
Esperando un archivo:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
En el ejemplo anterior, myDisplayerse utiliza como devolución de llamada.
myDisplayerse pasa a getFile()como un argumento.
A continuación se muestra una copia de mycar.html:
micoche.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>