Panne bei CSS-Steuerung via Javascript

[Mattes]

ich habe 4 verschiedene <DIV>s mit den IDs bsp_1, bsp_2, bsp_3 und bsp_4; alle vier <DIV>s werden nicht angezeigt.

Sobald alle vier geladen sind, sollen bsp_1 bis bsp_3 hintereinander genau eine Sekunde angezeigt werden; danach soll das Programm auf bsp_4 verharren.

So weit so prickelnd, allerdings scheint mein dafür geschriebener Quellcode [offenbar] eine Endlosschleife zu erzeugen und dadurch unbrauchbar zu werden:

function Hauptprogramm() { while (aktiv < 4) {     Durchlauf = setInterval(function(){ ToggleEffekt() }, 1000); } }

Du hast zwei Probleme:

Die while-Schleife ist zwar keine Endlos-, aber eine dauerhaft laufende Schleife, die sehr wahrscheinlich den Browser lahmlegt, bevor sie nach vier Sekunden aufhören kann. Der Grund ist, dass der Aufruf von setInterval() keine Verzögerung im Schleifendurchlauf ergibt. Die Funktion legt lediglich eine Eieruhr an, die parallel zum Hauptprogramm läuft. Das bedeutet, sofort nach Aufruf von setInterval(), nicht erst nach Ende der Wartezeit, dreht deine Schleife eine erneute Runde. Und noch eine. Und noch eine …

In diesem Konstrukt ist setInterval() eigentlich die falsche Funktion. Du möchest die Schleife vier Mal durchlaufen, jeweils mit einer Sekunde Abstand. setInterval() legt aber selbst eine Schleife an (daher "Interval"), die gegebene Funktion (ToggleEffekt) wird mit dem gegebenen Zeitabstand wieder und wieder aufgerufen.

Wenn überhaupt, dann müsstest du hier setTimeout() benutzen, weil du kein sich wiederholendes Ereignis haben, sondern nur einmalig eine Zeit warten möchtest. Das funktioniert hier aber auch nicht, da, siehe 1., setTimeout() genauso wie setInterval() parallel zum Hauptprogramm laufen; auch setTimeout() kehrt sofort nach Aufruf wieder zurück.

So in etwa sollte es funktionieren:

Mit setInterval():

var Hauptprogramm = function () {
  var Durchlauf; // Variablen immer so lokal
  var aktiv = 1; // definieren, wie möglich

  Durchlauf = window.setInterval(function () { // regelmäßiger Aufruf des Schalters
    if (aktiv > 1) {
       document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
    }
    document.getElementById("bsp_" + aktiv).style.display = "block";
    aktiv += 1;
    if (aktiv > 4) {
       window.clearInterval(Durchlauf); // nach vier Durchläufen den Intervall stoppen
    }
  }, 1000)
};

Mit setTimeout():

var Hauptprogramm = function () {
  var aktiv = 1;
  var schalter = function () { // Funktion zum Weiterschalten
    if (aktiv > 1) {
       document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
    }
    document.getElementById("bsp_" + aktiv).style.display = "block";
    aktiv += 1;
    if (aktiv < 5) {
       window.setTimeout(schalter, 1000); // falls noch nicht mit allen Vieren durch, Eieruhr erneut starten
    }
  }
  window.setTimeout(schalter, 1000); // Eieruhr zum ersten Mal starten
};

Nicht ausprobiert und enthaltene Fehler sind selbstverständlich in voller Absicht zur Übung eingebaut …