JavaScript asíncrono

"¡Irá a terminar más tarde!"

Las funciones que se ejecutan en paralelo con otras funciones se denominan asíncronas (asíncronas)

Un buen ejemplo es JavaScript setTimeout()

JavaScript asíncrono

El ejemplo utilizado en el capítulo anterior se ha simplificado enormemente.

Su propósito es demostrar la sintaxis de las funciones de devolución de llamada:

Ejemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

pruébelo usted mismo

En el ejemplo anterior,myDisplayer es el nombre de la función.

Se pasa como parámetro a myCalculator();。

En el mundo real, los callbacks se utilizan más a menudo con funciones asíncronas.

Un ejemplo típico es JavaScript setTimeout();。

Esperar el retraso

Al usar funciones de JavaScript setTimeout(); En este caso, se puede especificar la función de devolución de llamada que se ejecutará después del retraso:

Ejemplo

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

pruébelo usted mismo

En el ejemplo anterior,myFunction Se utiliza como callback.

La función (nombre de la función) se pasa como parámetro a setTimeout();。

3000 es el número de milisegundos antes del timeout, por lo que se llamará después de 3 segundos myFunction()。

Cuando se pasa una función como parámetro, recuerde no usar paréntesis.

Correcto: setTimeout(myFunction, 3000);

Error: setTimeout(myFunction(), 3000);

Si no se pasa el nombre de la función como parámetro a otra función, siempre se puede pasar toda la función:

Ejemplo

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

pruébelo usted mismo

En el ejemplo anterior,function(){ myFunction("I love You !!!"); } se utiliza como callback. Es una función completa. La función completa se pasa como parámetro a setTimeout().

3000 es el número de milisegundos antes del timeout, por lo que se llamará después de 3 segundos myFunction()。

Esperando el intervalo:

Al usar funciones de JavaScript setInterval() en el que se puede especificar la función de callback a ejecutar en cada intervalo:

Ejemplo

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

pruébelo usted mismo

En el ejemplo anterior,myFunction usada como callback.

La función (nombre de la función) se pasa como parámetro a setInterval()。

1000 es el número de milisegundos entre intervalos, por lo tanto myFunction() se llama una vez por segundo.

Esperando el archivo

Si crea una función para cargar recursos externos (como scripts o archivos), no puede usar estos recursos antes de que se hayan cargado completamente.

Es el mejor momento para usar callbacks.

Este ejemplo carga un archivo HTML (mycar.html)，y luego se mostrará el archivo HTML completo en la página web：

Esperando el 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);
    }
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

pruébelo usted mismo

En el ejemplo anterior,myDisplayer usada como callback.

La función (nombre de la función) se pasa como parámetro a getFile()。

A continuación se muestra mycar.html de copia:

mycar.html

<img src="img_car.jpg" alt="Buen coche" style="ancho:100%">
<p>Un coche es un vehículo motorizado autopropulsado con ruedas utilizado para el transporte.</p>
<p>La mayoría de las definiciones del término especifican que los coches están diseñados para circular principalmente por carreteras, tener asientos para una a ocho personas y generalmente tener cuatro ruedas.</p>
<p>(Wikipedia)</p>