JavaScript-Rückrufe


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

„Ich rufe später noch einmal an!“

Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben wird

Mit dieser Technik kann eine Funktion eine andere Funktion aufrufen

Eine Rückruffunktion kann ausgeführt werden, nachdem eine andere Funktion beendet wurde

Funktionsablauf

JavaScript-Funktionen werden in der Reihenfolge ausgeführt, in der sie aufgerufen werden. Nicht in der Reihenfolge, in der sie definiert sind.

In diesem Beispiel wird am Ende „Auf Wiedersehen“ angezeigt:

Beispiel

 function myFirst() {
  myDisplayer("Hello");
}
function 
  mySecond() {
  
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

Probieren Sie es selbst aus →

<!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>

In diesem Beispiel wird am Ende „Hallo“ angezeigt:

Beispiel

 function myFirst() {
  myDisplayer("Hello");
}
function 
  mySecond() {
  
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

Probieren Sie es selbst aus →

<!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>

Ablaufsteuerung

Manchmal möchten Sie eine bessere Kontrolle darüber haben, wann eine Funktion ausgeführt werden soll.

Angenommen, Sie möchten eine Berechnung durchführen und dann das Ergebnis anzeigen.

Sie könnten eine Taschenrechnerfunktion aufrufen (myCalculator), das Ergebnis speichern, und rufen Sie dann eine andere Funktion (myDisplayer) auf, um das Ergebnis anzuzeigen:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Oder Sie könnten eine Taschenrechnerfunktion aufrufen (myCalculator), und lassen Sie die Rechnerfunktion die Anzeigefunktion aufrufen (myDisplayer):

Beispiel

 function myDisplayer(some) {
  document.getElementById("demo").innerHTML 
  = some;
}
function myCalculator(num1, num2) {
  
  let sum = num1 + num2;
  
  myDisplayer(sum);
}
myCalculator(5, 5);

Probieren Sie es selbst aus →

<!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>

Das Problem beim ersten Beispiel oben besteht darin, dass Sie zwei Funktionen aufrufen müssen, um das Ergebnis anzuzeigen.

Das Problem beim zweiten Beispiel besteht darin, dass Sie die Taschenrechnerfunktion nicht verhindern können Anzeige des Ergebnisses.

Jetzt ist es an der Zeit, einen Rückruf einzuholen.



JavaScript-Rückrufe

Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben wird.

Mithilfe eines Rückrufs können Sie die Taschenrechnerfunktion (myCalculator) aufrufen. mit einem Rückruf (myCallback) und lassen Sie die Taschenrechnerfunktion den Rückruf ausführen, nachdem die Berechnung abgeschlossen ist:

Beispiel

 function myDisplayer(some) {
  document.getElementById("demo").innerHTML 
  = some;
}
function myCalculator(num1, num2, myCallback) {
  
  let sum = num1 + num2;
  
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Probieren Sie es selbst aus →

<!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>

Im obigen Beispiel wird myDisplayer als Rückruffunktion bezeichnet.

Es wird als Argument an myCalculator() übergeben.

Notiz

Denken Sie beim Übergeben einer Funktion als Argument daran, keine Klammern zu verwenden.

Rechts: myCalculator(5, 5, myDisplayer);

Falsch: myCalculator(5, 5, myDisplayer());

Beispiel

// 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;
}

Probieren Sie es selbst aus →

<!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>

Im obigen Beispiel ist (x) => x >= 0 eine Rückruffunktion.

Es wird als Argument an removeNeg() übergeben.


Wann sollte ein Rückruf verwendet werden?

Die obigen Beispiele sind nicht sehr aufregend.

Sie sind vereinfacht, um Ihnen die Callback-Syntax beizubringen.

Wo Callbacks wirklich glänzen, sind asynchrone Funktionen, wobei eine Funktion auf eine andere Funktion warten muss (z. B. darauf warten, dass eine Datei geladen wird).

Asynchrone Funktionen werden im nächsten Kapitel behandelt.