Neuer Artikel: Timer in JavaScript

Im SELFHTML-Aktuell-Artikel Komfortable Timer-Funktion in JavaScript beschreiben Struppi und Mathias Schäfer eine JavaScript-Methode, die das wiederholte Aufrufen von Funktionen einfach möglich macht. Nützlich ist dies etwa für Animationen und andere zeitgebundene Ausgaben.

In JavaScript gibt es keinen vordefinierten sleep-Befehl, sondern ausschließlich Timeouts und Intervalle, die Funktionen in einem eigenen Ausführungskontext zeitverzögert aufrufen. Dies verlangt von vielen Programmierern ein Umdenken und man muss sich erst in diese ungewöhnliche Umsetzung eindenken. Die Timer-Methode wirkt als Wrapper für setTimeout und soll dessen Anwendung für den Zweck der mehrfachen Wiederholung einer Funktion vereinfachen.

Bei der Umsetzung wurden fortgeschrittene Programmiertechniken verwendet, die selbst Fortgeschrittenen nicht unbedingt geläufig sind: Der breite Einsatz von verschachtelten Funktionen bzw. Closures, die durchgängige Nutzung von Funktionen als Objekte und lokale Variablen sowie die prototypische Erweiterung der JavaScript-Kernobjekte. Mit mehr Aufmerksamkeit für die Eigenheiten von JavaScript finden sie glücklicherweise mehr und mehr Verbreitung – viele fertige Scripte nutzen sie ohnehin, es kommt allerdings darauf an, sie unter JavaScript-Programmierern bekannt und verständlich zu machen. Dazu soll die Dokumentation der Timer-Funktion einen Beitrag leisten.

3 Kommentare » Schreibe einen Kommentar

  1. Hi,

    ich habe einen kleinen SAchreibfehler gefunden. (…)

    Gruß Micha

    Danke für den Hinweis, ist korrigiert. In Zukunft wenn möglich bitte direkt an molily@selfhtml.org. – molily

  2. Thread war das falsche Wort, ich habe es geändert. Ich meinte, dass der Ausführungskontext verworfen wird und der Code ohne Verbindung zum vorigen Kontext im globalen Kontext ausgeführt wird. Dem kann man nur mit Closures entgegenwirken.

  3. Kleine unwichtige Anmerkung: setTimeout startet keinen eigenen Thread. In JavaScript gibt es _immer_ nur einen Thread. Das sieht man, wenn ein Script gerade noch läuft, während das Timeout schon lange abgelaufen ist. Die Callback-Funktion des Timeouts wird nämlich erst ausgeführt, wenn das andere Script fertig abgearbeitet wurde.

    Ausprobieren kann man das mit so sinnlosem Code wie diesem:

    var d = (new Date()).getTime();
    setTimeout(function() {
      alert("es sind " + ((new Date()).getTime() - d) + "millisekunden vergangen";
    }, 100);

    // sleep(500), nur mit verbrannter CPU:
    while((new Date()).getTime() - d < 500)
    ;

    Ich weiß jetzt nur einen Fall, in dem man das tatsächlich praktisch anwenden kann: ein Timeout von 0 Millisekunden. Damit kann man das eigene Script ans Ende der Warteschlange aller auszuführender Scripte verschieben. Nützlich ist das z.B. wenn es viele Event-Handler (addEventListener) gibt und man sicherstellen will, nach den anderen dran zu sein.

    Beispiel-Code:

    var someGlobalVariable = "bla";

    document.addEventListener("load", function(event) {
    window.someGlobalVariable = "blubb";
    }, false);
    document.addEventListener("load", function(event) {
    window.setTimeout(function() {
    alert(someGlobalVariable);
    }, 0);
    }, false);