"Jeg ringer tilbage senere!"
Et tilbagekald er en funktion, der sendes som et argument til en anden funktion
Denne teknik tillader en funktion at kalde en anden funktion
En tilbagekaldsfunktion kan køre efter en anden funktion er afsluttet
JavaScript-funktioner udføres i den rækkefølge, de kaldes. Ikke i den rækkefølge, de er defineret.
Dette eksempel vil ende med at vise "Farvel":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
Dette eksempel vil ende med at vise "Hej":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
Nogle gange vil du gerne have bedre kontrol over, hvornår du skal udføre en funktion.
Antag, at du vil lave en beregning og derefter vise resultatet.
Du kan kalde en lommeregnerfunktion (myCalculator), gemme resultatet, og kald derefter en anden funktion (myDisplayer) for at få vist resultatet:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
</script>
</body>
</html>
Eller du kan kalde en lommeregnerfunktion (myCalculator), og lad lommeregnerfunktionen kalde visningsfunktionen (myDisplayer):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
Problemet med det første eksempel ovenfor er, at du skal kalde to funktioner for at vise resultatet.
Problemet med det andet eksempel er, at du ikke kan forhindre lommeregnerfunktionen i viser resultatet.
Nu er det tid til at ringe tilbage.
Et tilbagekald er en funktion, der sendes som et argument til en anden funktion.
Ved at bruge et tilbagekald kan du kalde lommeregnerfunktionen (myCalculator) med et tilbagekald (myCallback), og lad lommeregnerfunktionen køre tilbagekaldet, efter at beregningen er afsluttet:
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
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 kaldes myDisplayer en tilbagekaldsfunktion.
Det sendes til myCalculator() som et argument.
Når du sender en funktion som argument, så husk ikke at bruge parentes.
Til højre: myCalculator(5, 5, myDisplayer);
Forkert: myCalculator(5, 5, myDisplayer());
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}Prøv det selv →
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
I eksemplet ovenfor er (x) => x >= 0 en tilbagekaldsfunktion.
Det sendes til removeNeg() som et argument.
Eksemplerne ovenfor er ikke særlig spændende.
De er forenklede for at lære dig tilbagekaldssyntaksen.
Hvor tilbagekald virkelig skinner er i asynkrone funktioner, hvor en funktion skal vente på en anden funktion (som at vente på, at en fil indlæses).
Asynkrone funktioner behandles i næste kapitel.