Einfache asynchrone Aufrufe in JavaScript mit Async.js

JavaScript ist eine Programmiersprache die als Non-Blocking bezeichnet wird: Wenn ein Funktionsaufruf längere Zeit in Anspruch nimmt, wie das z.B. bei AJAX oder Timeouts der Fall ist, wird der Thread des Codes nicht schlafen gelegt bis der Funktionsaufruf beendet ist, sondern läuft sofort weiter. Es ist nicht möglich auf die Auswirkungen des Aufrufs zu warten, außer man benutzt eine weitere Funktion die dann als Callback aufgerufen wird.
In den Anfangstagen von JavaScript hatte dieses Vorgehen durchaus seinen Sinn: Da die Sprache nur für einfache Animationen gedacht war und kein Multithreading unterstützt hat (was sie übrigens auch heute nur mithilfe von WebWorkern beherrscht), wären sonst bei jedem Timeout die Animationen der Website stehen geblieben. Heute wird JavaScript sehr oft verwendet um per AJAX Inhalte nachzuladen. Komplexere Funktionalität erfordern dann aber immer öfter mehrfach ineinander verschachtelte Callbacks, was den Code schnell schwer durschaubar werden lässt.
Als Beispiel verwende ich nur setTimeout(), man kann sich an dieser Stelle aber auch beispielsweise einen HTTP-GET per AJAX oder eine beliebige andere asynchrone Funktion vorstellen. Je mehr Funktionen dazu kommen, desto verwirrender wird der Code:

setTimeout(function(){
   alert("Du bist jetzt seit einer Sekunde auf dieser Seite");
   setTimeout(function(){
       alert("Seit der letzten Meldung sind 10 Sekunden vergangen");
       setTimeout(function(){
           alert("Eingeschlafen?");
       }, 3600*1000);
   }, 10000);
}, 1000)

Natürlich könnte man stattdessen auch einfach eine Funktion schreiben, die eine Liste an Funktionen als Argumente annimmt, und diese dann alle in Serie aufruft. Einfacher geht es allerdings mit Async.js:

async.series([
    function(callback) {
        setTimeout(function() {
           alert("Du bist seit einer Sekunde auf dieser Seite");
           callback();
        }, 1000);
    },
    function(callback) {
        setTimeout(function() {
            alert("Seit der letzten Meldung sind 10 Sekunden vergangen.");
            callback();
        }, 10000);
    },
    function(callback) {
        setTimeout(function(callback) {
            alert("Eingeschlafen?");
            callback();
        }, 1000*3600)
    }
]);

Die Funktion series führt alle Funktionen der Reihe nach aus. Mithilfe des Callbacks wird Async.js mitgeteilt wenn die Funktion beendet ist. Dieser Code ist zwar länger, aber dafür wesentlich lesbarer: Es ist auf einen Blick zu erkennen, wie lange die einzelnen Schritte dauern und welcher Code dann ausgeführt wird. Auch bei sehr vielen voneinander abhängigen Aufrufen bleibt die Zahl der Einrückungen übersichtlich.
Dieses Beispiel zeigt nur den einfachsten Anwendungsfall von Async.js. Es gibt neben series noch viele andere Strategien um Aufrufe zu synchronisieren. Mit parallel werden die Funktionen nicht seriell, sondern parallel gestartet. Ein Callback wird aufgerufen sobald alle Funktionen fertig abgearbeitet wurden. Außerdem gibt es noch viele funktionale Strategien wie map, reduce und filter, die benutzt werden können um eine Collection aus Daten einfach mit asynchronen Funktionen zu verändern.