Ajaxer

Javascript punks

JavaScript als funktionale Programmiersprache – Teil 8 – Callbacks

| Keine Kommentare

Erst Funktionen ermöglichen die effiziente Verarbeitung von asynchronen Programmabläufen. Fast jedes Programm lässt sich synchron schreiben. Angenommen, ein Programm lädt Daten über ein Netzwerk. Nachdem es diese Daten geladen hat, verarbeitet es diese Daten. Dies ließe sich wie folgt lösen.

var xhReq = new XMLHttpRequest(); xhReq.open("GET", "someURL", false); xhReq.send(null);
var daten = xhReq.responseText; print(daten);

Dieser Ansatz hat einen entscheidenden Nachteil. Das Programm wird blockiert, bis der Request abgearbeitet ist. Da JavaScript eine Sprache ist, die per Definition nur in einem Thread läuft, ist so lange der ganze Prozess oder Thread blockiert und benötigt Systemressourcen. Daher ist dieser blockierende Ansatz nicht zu empfehlen.
Besser ist der Ansatz, dies über Callbacks zu lösen. Dazu muss dem Request eine Callback-Funktion zur Verfügung gestellt werden. Funktionen sind Objekte. Darum können sie einer Funktion als Parameter übergeben werden. Diese übergebene Callback-Funktion wird dann aufgerufen, wenn der Request beendet ist und die Daten vorliegen. Der Request wartet nicht, bis die Response vorliegt, sondern kehrt sofort zurück.

request.on('response', function (response) { 
  response.on('data', function (daten) {
    console.log(daten);
  });
});

Diese Art der asynchronen Requests stellen Node (node.js) auf dem Server und Ajax-Frameworks im Webbrowser zur Verfügung. Node.js wird in im Buch ebenfalls besprochen.

Doch wie programmiert man selbst eine Funktion mit Callbacks. Als Beispiel schreiben wir eine Funktion, die eine lange Berechnung durchführt – die Summe aller Zahlen von eins bis eintausend. Diese Funktion wird zuerst synchron programmiert und anschließend zu einer asynchronen Callback-Funktion überarbeitet.

function calculate1To1000Synchronous() { 
  var result = 0;
  for (var i = 1; i < = 1000; i++) {
    result += i; 
   }
   return result;
}
var summe = calculate1To1000Synchronous(); 
console.log(summe); // 500500

Da in Wirklichkeit kein I/O durchgeführt wird, läuft diese Funktion nach dem Refactoring natürlich immer noch in einem einzigen Thread. Exemplarisch wird hier allerdings nun eine anonyme Callback-Funktion übergeben und nach der Berechnung des Werts aufgerufen.

function calculate1To1000WithCallback(callback) { 
  var result = 0;
  for (var i = 1; i < = 1000; i++) {
    result += i; 
  }
  callback(result);
}
calculate1To1000WithCallback(function(data) {
  console.log(data); // 500500
}); 

Cover-klein in JavaScript als funktionale Programmiersprache - Teil 8 - Callbacks - AjaxerDies ist eine autorisierte Leseprobe aus dem Buch Oliver Ochs – JavaScript für Enterprise-Entwickler: Professionell programmieren im Browser und auf dem Server – dpunkt.verlag GmbH 2012.

Autor: Oliver Ochs

Oliver Ochs ist bei der Management- und IT-Unternehmensberatung Holisticon AG in Hamburg tätig. Er beschäftigte sich in den letzten Jahren mit Content Management Systemen, Webframeworks und Portalen auf Java-Basis. In diesem Umfeld arbeitete er als Entwickler, Architekt und Projektleiter. Er hat darüber hinaus Erfahrungen in Schulungen und Coachings. In letzter Zeit setzte er einen seiner Schwerpunkte auch auf Web- Application-Security, Identity-Management und neue Seiten von JavaScript. Ein anderer persönlicher Schwerpunkt sind agile Methoden und Prozesse

Schreib einen Kommentar

Pflichtfelder sind mit * markiert.