[Quicktip] Callback-Funktionen mit Javascript

Neben der Möglichkeit, unter Javascript anonyme Funktionen direkt als Parameter zu übergeben, kommt man vielleicht auch mal an die Stelle, dass man einer Methode den Namen einer anderen Funktion übergeben möchte, die diese dann nach Fertigstellung ihrer Aufgabe ausführen soll. Da man nicht einfach wie z.B. bei php den Funktionsnamen dynamisch per Variable angeben kann, muss man einen kleinen Trick anwenden. Und der geht so:

if(typeof window[funcName] == 'function') window[funcName]();

In der Variable “funcName” steht der Name der Funktion drin, die ihr aufrufen wollt. Der if-Block davor dient nur der Sicherheit – die Funktion wird nur aufgerufen, wenn es sie auch gibt. In der Klammer bei ” window[funcName]()” könnt ihr natürlich wie gewohnt Parameter übergeben.

[Update]
Und hier noch eine weitere Möglichkeit, die mir persönlich besser gefällt und die auch zuverlässiger funktioniert:

function funktionEins(data, callback) {
    //...
    //do something with data...
    //...
    //run our callback
    if(callback != undefined && typeof callback == 'function') callback();
}

Optional kann man natürlich auch Daten/Variablen an die Callbackmethode übergeben:

callback(data);

Wir haben nun also eine Ausgangsfunktion. Rufen wir diese nun auf und übergeben eine existierende Funktion oder eine anonyme Funktion, so kann diese ausgeführt werden:

function funktionZwei() {
    //do something
}
funktionEins("test", funktionZwei);

oder eben

funktionEins("test2", function(data) {
    alert(data);
});

mit einer anonymen Funktion, die in diesem Beispiel eben auch einen Parameter anbietet.

via selfhtml.org

Published by

bytelude

Softwareentwickler, Technik Fanatiker, Apple Fan, Kinoliebhaber, Prokrastinations-Spezialist

7 thoughts on “[Quicktip] Callback-Funktionen mit Javascript”

  1. Soweit so gut 😉
    Doch wie kann ich einer Callback-Funktion bereits im Voraus Argumente übergeben?

    Ich dachte an folgendes Szenario: Ich rufe eine Funktion auf und möchte, dass eine Methode mit bestimmten Daten ausgeführt wird, sobald die erste Funktion ihrem Lebensende unaufhaltbar entgegen rennt.

    Bsp:

    doSomething(callbackMethod);

    function doSomething(callback) {
    // do something meaningful
    if (typeof callback != ‘undefined’) {
    callback(data);
    }
    }

    Wobei ich data bereits vor dem callback-Aufruf kenne. Ich möchte also wirklich nur warten bis die doSomething-Funktion fertig ist und dann den anderen Kram ausführen 🙂

    Gruß

    1. Indem du die aufzurufende Funktion inkl. Parameter in eine anonyme Funktion packst, welche dann als Callback Methode übergeben wird…

  2. Hi,

    habe mich an deinem Code (aus dem Update) orientiert, und es funzt super im Firefox. Leider nicht im IE9. Woran kann das liegen?
    Gruß,

  3. die Aufrufe:
    fertiggeladen(erste, function(Ebene) {
    alert(Ebene);
    });

    fertiggeladen(zweite, function(Ebene) {
    alert(Ebene);
    });

    und:

    function fertiggeladen(Ebene, callback) {

    //Editieren der Seite
    Ebene = Ebene + “fertig”;
    //callback(Ebene);
    if(callback != undefined && typeof callback == ‘function’) callback(Ebene); // Die beiden Rückgaben funktionieren

    }
    Leider wartet nur Firefox, nicht der IE. Und der 2te Aufruf braucht die Ergebnisse der Ersten. Kann leider nicht beides in eine Funktion schreiben.

  4. Am Ende des Scripts. Der erste läuft immer. Der zweite nicht im IE.
    Ist die Funktion im IE anders aufgebaut?

Leave a Reply

Your email address will not be published.