Korrekte Endlosschleife mit Javascript und setTimeout

13. März 2012  |  Kommentar schreiben   |  Tags: , , ,



Bei Facebook teilen

Javascript wird mehr und mehr als Alternative zu schönen Flash Animationen eingesetzt und dadurch, dass moderne Browser auch die Hardwarekapazitäten Ihres Rechners gut nutzen können, so lassen sich diverse Effekte und Animationen mit Javascript umsetzen. Oft werden Sie solche Effekte programmieren wollen, wo Sie innerhalb einer endlosen Schleife HTML Elemente versetzen oder Texte und Felder manipulieren. Nachfolgend betrachten wir bewährte Praktiken bei der Implementierung von endlosen Schleifen mit Javascript.

Erste und nicht (mehr) umsetzbare Variante

Eine endlose Schleife können Sie wie folgt implementieren:

while(true) {
Funktion();
}

Dies ist keine gute und keine mögliche Ausführung. Die Problematik liegt darin, dass Sie nicht kontrollieren können wie schnell diese endlose Schleife ausgeführt wird und somit läuft sie so schnell, wie Ihr Rechner kann. Dies erkennen aktuelle Browser und zeigen eine entsprechende Meldung, dass Ihr Skript nicht mehr reagiert und beendet werden soll. Ihr Rechner wird auch dadurch sehr langsam und unter Umständen nicht mehr kontrollierbar. While(true) können Sie einfach vergessen.

Lösung – endlose Schleife mit setTimeout und Javascript umsetzen

Die Funktion setTimeout(Funktion, Zeit) ist wirklich sehr nützlich, mit dieser können Sie einen Funktionsaufruf nach einer bestimmten Verzögerung auslösen. Die erste Frage, die sich herausstellt ist – kann ich doch in while(true) einfach einen setTimeout Aufruf unterbringen? Antwort – nein! Die Ursache dafür ist dass die Ausführung der while(true) Schleife nicht beim Aufruf der setTimeout Funktion selbst verzögert wird – wir kommen dann aufs gleiche Problem mit dem Absturz des Browsers. Es hindert Sie jedoch nichts, eine Rekursion mit setTimeout zu implementieren:


function Versetzen(nAbstand) {
VersetzeMichUm(nAbstand);
nAbstand++;
setTimeout("Versetzen('"+nAbstand+"')",1000);
}

Das obige Beispiel zeigt wie eine kontrollierte und endlose Schleife ganz einfach mit JS zu programmieren ist. Was passiert oben?

  • Sie definieren eine Funktion Versetzen, die als Parameter eine Ganzzahl nimmt, z.B. 0.
  • Sie führen eine andere Funktion VersetzeMichUm, die die tatsächliche Bewegung auslöst.
  • Die Ganzzahl wird um eins erhöht (Sie können Ihre Parameter beliebig manipulieren)
  • Erst nach 1000 ms wird die Funktion von sich selbst wieder aufgerufen, jedoch mit einem anderen Parameter – die Ganzzahl, die wir gerade erhöht haben
  • Und so weiter…

Diese Implementierung ist eine bewährte Praktik und wird von allen Browsern ohne Probleme ausgeführt. Durch Änderung der Zeit (1000 ms = 1 sek)  können Sie die endlose Javascript Schleife schneller oder langsamer machen. Solche endlosen Schleifen setzen wir stets in unserem CMS ein, bei der Umsetzung unserer interaktiven Widgets.

Kommen Sie nicht weiter – wir helfen Ihnen gerne, schreiben Sie uns an!

Teilen

Hinterlasse eine Antwort

Du musst angemeldet sein, um einen Kommentar abzugeben.