JavaScript-återuppringningar


Innehållsförteckning

    Visa innehållsförteckning

"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

Funktionssekvens

JavaScript-funktioner körs i den sekvens de kallas. Inte i den sekvens de definieras.

Det här exemplet kommer att visa "Goodbye":

Exempel

 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":

Exempel

 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>

Sekvenskontroll

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:

Exempel

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):

Exempel

 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.



JavaScript-återuppringningar

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:

Exempel

 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.

Notera

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());

Exempel

// 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.


När ska man använda en återuppringning?

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.