Gesteuertes Aufrufen von Funktionen in JavaScript per Callback

26.03.2014, 15:15 von Daniel || 0 Kommentare || Mit anderen teilen

Beim Arbeiten mit JavaScript wird man auf kurz oder lang in die Situation kommen, eine Funktion erst aufrufen zu wollen, wenn eine andere fertig mit der Ausführung ist. Dieses kleine Tutorial zeigt einen Weg, wie es gehen kann.

Stellen wir uns folgende Situation vor: Eine Funktion hideMessage() soll ausgeführt werden, nachdem Funktion showMessage() fertig mit der Ausführung ist. Ein simples Aufeinanderfolgen der beiden Funktionen, wie in folgendem Beispiel, wird nichts bringen.

(function() {
  showMessage();
  hideMessage();

  function showMessage() {
    // jQuery: AJAX-Aufruf
    $.ajax({
      url: '/path/to/my/script.php',
      data: 'param=value'
    })
    .done(function(data) {
      $(body).append('<div id="message">' + data + '</div>');
    });
  }

  function hideMessage() {
    $('#message')
      .hide(0)
      .delay(5000)
      .detach();
  }
})();

Zur Veranschaulichung: In der Funktion showMessage() wird ein AJAX-Aufruf gestartet und die vom Server kommende Antwort innerhalb eines <div>-Containers in die Seite gehangen. Nach einer 5-sekündigen Verzögerung soll hideMessage() die Nachricht schließlich wieder ausblenden und aus dem DOM entfernen.

Jetzt kann es natürlich passieren, dass der Server aufgrund hoher Last etwas länger für die Antwort braucht. Die Funktion hideMessage() findet in diesem Fall den DOM-Knoten nicht und der Aufruf verpufft im Nirvana. Was also nun? An dieser Stelle hilft ein Callback.

Was ist ein Callback?

Laut Wikipedia ist ein Callback "Eine Rückruffunktion (englisch callback function) [...], die einer anderen Funktion als Parameter übergeben und von dieser unter gewissen Bedingungen aufgerufen wird."

Das bedeutet in dem obigen Beispiel, dass Funktion hideMessage() nicht seriell nach showMessage() aufgerufen wird, sondern von showMessage() selbst über einen Callback.

Die Lösung

Um das obige Beispiel nun zu korrigieren, muss in einem ersten Schritt die Funktion showMessage() erweitert werden:

function showMessage(readyCallback) {
  // jQuery: AJAX-Aufruf
  $.ajax({
    url: '/path/to/my/script.php',
    data: 'param=value'
  })
  .done(function(data) {
    $(body).append('<div id="message">' + data + '</div>');

    if (readyCallback && typeof(readyCallback) === 'function') {
      readyCallback();
    }

  });
}

Der an die Funktion übergebene Parameter readyCallback ist optional. Seine Verarbeitung wird an der Stelle notiert, an der sie ausgeführt werden soll. In dem obigen Beispiel ist das am Ende der jQuery-.done-Methode, nachdem alle anderen Schritte durch sind.

Nachdem showMessage() nun passend erweitert wurde, fehlt noch der richtige Aufruf, sodass hideMessage() nicht mehr ins Leere laufen kann:

(function() {
  showMessage(function() {
    hideMessage();
  });
});

Über Sinn und Unsinn des Beispiels lässt sich natürlich streiten. Ich denke aber, dass es anschaulich darstellt, um was es hier geht. Mit Callbacks ist es also möglich, mehr Kontrolle in die Ablaufsteuerung seiner Skripte zu bekommen.

Schlüsselwörter zu diesem Beitrag

« zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Kommentare



Nutze Deinen Gravatar.


Bitte rechnen Sie 7 plus 6.