Asynchrones JavaScript
"Ich werde später fertig!"
Funktionen, die parallel zu anderen Funktionen ausgeführt werden, werden als asynchron bezeichnet
Ein gutes Beispiel ist JavaScript setTimeout()
Asynchrones JavaScript
Die im vorherigen Kapitel verwendeten Beispiele waren sehr vereinfacht.
Der Zweck der Beispiele war, die Syntax von Callback-Funktionen zu demonstrieren:
Beispiel
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Im obigen Beispiel myDisplayerist der Name einer Funktion.
Es wird myCalculator()als Argument übergeben.
In der realen Welt werden Rückrufe am häufigsten mit asynchronen Funktionen verwendet.
Ein typisches Beispiel ist JavaScript setTimeout().
Warten auf eine Zeitüberschreitung
Wenn Sie die JavaScript-Funktion verwenden setTimeout(), können Sie eine Callback-Funktion angeben, die bei Zeitüberschreitung ausgeführt werden soll:
Beispiel
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Im obigen Beispiel myFunctionwird als Callback verwendet.
myFunctionwird setTimeout()als Argument übergeben.
3000 ist die Anzahl der Millisekunden vor dem Timeout,
myFunction()wird also nach 3 Sekunden aufgerufen.
Wenn Sie eine Funktion als Argument übergeben, denken Sie daran, keine Klammern zu verwenden.
Rechts: setTimeout(myFunction, 3000);
Falsch: setTimeout(meineFunktion(), 3000);
Anstatt den Namen einer Funktion als Argument an eine andere Funktion zu übergeben, können Sie stattdessen immer eine ganze Funktion übergeben:
Beispiel
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Im obigen Beispiel function(){ myFunction("I love You !!!"); }
wird als Callback verwendet. Es ist eine vollständige Funktion. Die komplette Funktion wird als Argument an setTimeout() übergeben.
3000 ist die Anzahl der Millisekunden vor dem Timeout,
myFunction()wird also nach 3 Sekunden aufgerufen.
Warten auf Intervalle:
Wenn Sie die JavaScript-Funktion verwenden setInterval(), können Sie eine Callback-Funktion angeben, die für jedes Intervall ausgeführt werden soll:
Beispiel
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Im obigen Beispiel myFunctionwird als Callback verwendet.
myFunctionwird setInterval()als Argument übergeben.
1000 ist die Anzahl der Millisekunden zwischen den Intervallen,
myFunction()wird also jede Sekunde aufgerufen.
Warten auf Dateien
Wenn Sie eine Funktion zum Laden einer externen Ressource (z. B. eines Skripts oder einer Datei) erstellen, können Sie den Inhalt nicht verwenden, bevor er vollständig geladen ist.
Dies ist der perfekte Zeitpunkt, um einen Rückruf zu verwenden.
Dieses Beispiel lädt eine HTML-Datei ( mycar.html) und zeigt die HTML-Datei auf einer Webseite an, nachdem die Datei vollständig geladen wurde:
Warten auf eine Datei:
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);
Im obigen Beispiel myDisplayerwird als Callback verwendet.
myDisplayerwird getFile()als Argument übergeben.
Unten ist eine Kopie von mycar.html:
meinauto.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>