"Jag ringer tillbaka senare!"
En callback är en funktion som skickas som ett argument till en annan funktion
Denna teknik tillåter en funktion att anropa en annan funktion
En återuppringningsfunktion kan köras efter att en annan funktion har avslutats
JavaScript-funktioner körs i den sekvens de kallas. Inte i den sekvens de definieras.
Det här exemplet kommer att visa "Goodbye":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Prova själv →
<!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>
Det här exemplet kommer att visa "Hej":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Prova själv →
<!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>
Ibland skulle du vilja ha bättre kontroll över när en funktion ska utföras.
Anta att du vill göra en beräkning och sedan visa resultatet.
Du kan anropa en kalkylatorfunktion (myCalculator
), spara resultatet, och anropa sedan en annan funktion (myDisplayer
) för att visa 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);
Prova själv →
<!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 så kan du anropa en kalkylatorfunktion (myCalculator
), och låt kalkylatorfunktionen anropa visningsfunktionen (myDisplayer
):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Prova själv →
<!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örsta exemplet ovan är att du måste anropa två funktioner för att visa resultatet.
Problemet med det andra exemplet är att du inte kan förhindra att räknaren fungerar visar resultatet.
Nu är det dags att ringa tillbaka.
En callback är en funktion som skickas som ett argument till en annan funktion.
Genom att använda en återuppringning kan du anropa kalkylatorfunktionen (myCalculator
) med en återuppringning (myCallback
), och låt kalkylatorfunktionen köra återuppringningen efter att beräkningen är klar:
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
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 kallas myDisplayer
för en återuppringningsfunktion.
Den skickas till myCalculator()
som ett argument.
När du skickar en funktion som ett argument, kom ihåg att inte använda parentes.
Höger: myCalculator(5, 5, myDisplayer);
Fel: 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;
}
Prova själv →
<!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 exemplet ovan är (x) => x >= 0
en återuppringningsfunktion.
Det skickas till removeNeg()
som ett argument.
Exemplen ovan är inte särskilt spännande.
De är förenklade för att lära dig syntaxen för återuppringning.
Där återuppringningar verkligen lyser är i asynkrona funktioner, där en funktion måste vänta på en annan funktion (som att vänta på att en fil ska laddas).
Asynkrona funktioner behandlas i nästa kapitel.