„Ich werde später fertig sein!“
Funktionen, die parallel mit anderen Funktionen laufen, werden asynchron genannt
Ein gutes Beispiel ist JavaScript setTimeout()
Die im vorherigen Kapitel verwendeten Beispiele wurden stark vereinfacht.
Der Zweck der Beispiele bestand darin, die Syntax von Callback-Funktionen zu demonstrieren:
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
Im obigen Beispiel ist myDisplayer der Name einer Funktion.
Es wird als Argument an myCalculator() übergeben.
In der realen Welt werden Rückrufe am häufigsten mit asynchronen Funktionen verwendet.
Ein typisches Beispiel ist JavaScript setTimeout().
Bei Verwendung der JavaScript-Funktion setTimeout(), Sie können eine Rückruffunktion angeben, die bei Zeitüberschreitung ausgeführt werden soll:
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
</script>
</body>
</html>
Im obigen Beispiel wird myFunction als Rückruf verwendet.
myFunction wird als Argument an setTimeout() übergeben.
3000 ist die Anzahl der Millisekunden vor dem Timeout, also myFunction() wird nach 3 Sekunden aufgerufen.
Denken Sie beim Übergeben einer Funktion als Argument daran, keine Klammern zu verwenden.
Rechts: setTimeout(myFunction, 3000);
Falsch: setTimeout(myFunction(), 3000);
Anstatt den Namen einer Funktion als Argument an eine andere Funktion zu übergeben, Sie können stattdessen jederzeit eine ganze Funktion übergeben:
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
</script>
</body>
</html>
Im obigen Beispiel ist function(){ myFunction("I love You !!!"); wird als Rückruf verwendet. Es handelt sich um eine vollständige Funktion. Die vollständige Funktion wird als Argument an setTimeout() übergeben.
3000 ist die Anzahl der Millisekunden vor dem Timeout, also myFunction() wird nach 3 Sekunden aufgerufen.
Bei Verwendung der JavaScript-Funktion setInterval(), Sie können eine Callback-Funktion angeben, die für jedes Intervall ausgeführt werden soll:
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Using setInterval() to display the time every second (1000 milliseconds).</p>
<h1 id="demo"></h1>
<script>
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
</script>
</body>
</html>
Im obigen Beispiel wird myFunction als Rückruf verwendet.
myFunction wird als Argument an setInterval() übergeben.
1000 ist also die Anzahl der Millisekunden zwischen Intervallen myFunction() wird jede Sekunde aufgerufen.
Mit der asynchronen Programmierung können JavaScript-Programme lang laufende Aufgaben starten, und andere Aufgaben parallel weiter ausführen.
Allerdings sind asynchrone Programme schwierig zu schreiben und schwer zu debuggen.
Aus diesem Grund verwenden die meisten modernen asynchronen JavaScript-Methoden keine Rückrufe. Stattdessen wird in JavaScript die asynchrone Programmierung mithilfe von Promises gelöst.
Im nächsten Kapitel dieses Tutorials erfahren Sie mehr über Versprechen.