"Jag avslutar senare!"
Funktioner som körs parallellt med andra funktioner kallas asynkrona
Ett bra exempel är JavaScript setTimeout()
Exemplen som användes i föregående kapitel var mycket förenklade.
Syftet med exemplen var att demonstrera syntaxen för återuppringningsfunktioner:
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Prova själv →
<!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 exemplet ovan är myDisplayer
namnet på en funktion.
Den skickas till myCalculator()
som ett argument.
I den verkliga världen används callbacks oftast med asynkrona funktioner.
Ett typiskt exempel är JavaScript setTimeout()
.
När du använder JavaScript-funktionen setTimeout()
, du kan ange en återuppringningsfunktion som ska utföras vid timeout:
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Prova själv →
<!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 exemplet ovan används myFunction
som en återuppringning.
myFunction
skickas till setTimeout()
som ett argument.
3000 är antalet millisekunder före time-out, alltså myFunction()
kommer att anropas efter 3 sekunder.
När du skickar en funktion som ett argument, kom ihåg att inte använda parentes.
Höger: setTimeout(myFunction, 3000);
Fel: setTimeout(myFunction(), 3000);
Istället för att skicka namnet på en funktion som ett argument till en annan funktion, du kan alltid skicka en hel funktion istället:
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Prova själv →
<!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 exemplet ovan, function(){ myFunction("Jag älskar dig !!!"); }
används som en återuppringning. Det är en komplett funktion. Den fullständiga funktionen skickas till setTimeout() som ett argument.
3000 är antalet millisekunder före time-out, alltså myFunction()
kommer att anropas efter 3 sekunder.
När du använder JavaScript-funktionen setInterval()
, du kan ange en återuppringningsfunktion som ska utföras för varje intervall:
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Prova själv →
<!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 exemplet ovan används myFunction
som en återuppringning.
myFunction
skickas till setInterval()
som ett argument.
1000 är antalet millisekunder mellan intervaller, alltså myFunction()
anropas varje sekund.
Med asynkron programmering kan JavaScript-program starta långvariga uppgifter, och fortsätta köra andra uppgifter parallellt.
Men asynkronprogram är svåra att skriva och svåra att felsöka.
På grund av detta använder de flesta moderna asynkrona JavaScript-metoder inte återuppringningar. I JavaScript löses istället asynkron programmering med Promises istället.
Du kommer att lära dig om löften i nästa kapitel i denna handledning.