Asynchrone JavaScript

"Ich werde später fertig sein!"

Funktionen, die parallel zu anderen Funktionen ausgeführt werden, werden als asynchron (asynchronous) bezeichnet

Ein gutes Beispiel ist JavaScript setTimeout()

Asynchrone JavaScript

Die im vorherigen Kapitel verwendeten Beispiele wurden erheblich vereinfacht.

Ziel ist es, die Syntax der Callback-Funktion zu demonstrieren:

können Sie die Callback-Funktion für jedes Intervall angeben：

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

Probieren Sie es selbst aus

d.getSeconds();myDisplayer ist der Name der Funktion.

wird als Parameter an myCalculator();。

In der realen Welt werden Callbacks am häufigsten mit asynchronen Funktionen verwendet.

Ein typisches Beispiel ist JavaScript setTimeout();。

Warten auf Timeout

Wartezeit setTimeout(); können Sie den Callback-Funktion angeben, die bei Ablauf der Verzögerung ausgeführt wird:

können Sie die Callback-Funktion für jedes Intervall angeben：

setTimeout(myFunction, 3000);
setInterval(myFunction, 1000);
  document.getElementById("demo").innerHTML = "Ich liebe dich !!";
}

Probieren Sie es selbst aus

Im obigen Beispiel wirdIn dem obigen Beispiel wird, wird als Callback verwendet.

Funktion (Funktionsname) wird als Parameter an setTimeout();。

wird als Callback verwendet. Es ist eine vollständige Funktion. Eine vollständige Funktion wird als Parameter an setTimeout() übergeben. 1000 sind die Millisekunden zwischen den Intervallen, daher。

Wenn Sie eine Funktion als Parameter übergeben, vergessen Sie nicht, die Klammern wegzulassen.

Korrekt: setTimeout(myFunction, 3000);

Fehler: setTimeout(myFunction(), 3000);

Wenn Sie den Namen der Funktion nicht als Parameter an eine andere Funktion übergeben, können Sie immer die gesamte Funktion übergeben:

können Sie die Callback-Funktion für jedes Intervall angeben：

setTimeout(function() { myFunction("Ich liebe dich !!!"); }, 3000);
function myFunction(value) {
  function myFunction(value) {}}
}

Probieren Sie es selbst aus

d.getSeconds();document.getElementById("demo").innerHTML = value; function(){ myFunction("Ich liebe dich !!!"); }

wird als Callback verwendet. Es ist eine vollständige Funktion. Eine vollständige Funktion wird als Parameter an setTimeout() übergeben. 1000 sind die Millisekunden zwischen den Intervallen, daher。

3000 sind die Millisekunden vor dem Timeout, daher wird nach 3 Sekunden aufgerufen

Wartezeit myFunction Beim Verwenden von JavaScript-Funktionen

können Sie die Callback-Funktion für jedes Intervall angeben：

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

Probieren Sie es selbst aus

d.getSeconds();In dem obigen Beispiel wird, als Callback verwendet.

Funktion (Funktionsname) wird als Parameter an myFunction。

setInterval() 1000 sind die Millisekunden zwischen den Intervallen, daher myFunction()

jedes Sekunde aufgerufen.

Datei abwarten

Das ist der beste Zeitpunkt für Callbacks. Wenn Sie Funktionen erstellen, um externe Ressourcen (wie Skripte oder Dateien) zu laden, können Sie diese Inhalte vor dem vollständigen Laden nicht verwenden.

In diesem Beispiel wird eine HTML-Datei geladen (mycar.html) und zeigt die HTML-Datei im Browser an, wenn diese vollständig geladen wurde：

Datei abwarten：

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

Probieren Sie es selbst aus

Im obigen Beispiel wirdmyDisplayer als Callback verwendet.

Funktion (Funktionsname) wird als Parameter an getFile()。

Hier ist mycar.html Kopie:

mycar.html

<img src="img_car.jpg" alt="Schönes Auto" style="width:100%">
<p>Ein Auto ist ein rado-fahrendes, selbstangetriebenes Kraftfahrzeug, das zum Transport verwendet wird.</p>
<p>Die meisten Definitionen des Begriffs spezifizieren, dass Autos hauptsächlich auf Straßen fahren sollen, mit Sitzplätzen für eine bis acht Personen und typischerweise mit vier Rädern.</p>
<p>(Wikipedia)</p>