"Jeg afslutter senere!"
Funktioner, der kører parallelt med andre funktioner, kaldes asynkrone
Et godt eksempel er JavaScript setTimeout()
Eksemplerne brugt i det foregående kapitel var meget forenklede.
Formålet med eksemplerne var at demonstrere syntaksen for tilbagekaldsfunktioner:
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);Prøv det selv →
<!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>
I eksemplet ovenfor er myDisplayer navnet på en funktion.
Det sendes til myCalculator() som et argument.
I den virkelige verden bruges tilbagekald oftest med asynkrone funktioner.
Et typisk eksempel er JavaScript setTimeout().
Når du bruger JavaScript-funktionen setTimeout(), du kan angive en tilbagekaldsfunktion, der skal udføres ved timeout:
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}Prøv det selv →
<!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>
I eksemplet ovenfor bruges myFunction som et tilbagekald.
myFunction sendes til setTimeout() som et argument.
3000 er antallet af millisekunder før time-out, så myFunction() vil blive kaldt efter 3 sekunder.
Når du sender en funktion som argument, så husk ikke at bruge parentes.
Højre: setTimeout(myFunction, 3000);
Forkert: setTimeout(myFunction(), 3000);
I stedet for at overføre navnet på en funktion som et argument til en anden funktion, du kan altid sende en hel funktion i stedet for:
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}Prøv det selv →
<!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>
I eksemplet ovenfor, function(){ myFunction("Jeg elsker dig !!!"); } bruges som tilbagekald. Det er en komplet funktion. Den komplette funktion sendes til setTimeout() som et argument.
3000 er antallet af millisekunder før time-out, så myFunction() vil blive kaldt efter 3 sekunder.
Når du bruger JavaScript-funktionen setInterval(), du kan angive en tilbagekaldsfunktion, der skal udføres for hvert interval:
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}Prøv det selv →
<!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>
I eksemplet ovenfor bruges myFunction som et tilbagekald.
myFunction sendes til setInterval() som et argument.
1000 er antallet af millisekunder mellem intervaller, altså myFunction() kaldes hvert sekund.
Med asynkron programmering kan JavaScript-programmer starte langvarige opgaver, og fortsætte med at køre andre opgaver parallelt.
Men asynkrone programmer er svære at skrive og svære at fejlfinde.
På grund af dette bruger de fleste moderne asynkrone JavaScript-metoder ikke tilbagekald. I stedet løses asynkron programmering i JavaScript ved hjælp af Promises i stedet.
Du vil lære om løfter i det næste kapitel i denne øvelse.