Der Kommunikationsstratege: Panne bei CSS-Steuerung via Javascript

SELF-Forum

Panne bei CSS-Steuerung via Javascript

Der Kommunikationsstratege
– Informationen zu den Bewertungsregeln

Hallo und schon mal im Vorhinein vielen Dank für eure Hilfestellungen.

Die Ausgangslage:

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:


<script type="text/javascript">

var Durchlauf;
var aktiv = 1;
var inaktiv;

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

function ToggleEffekt() {
	if (aktiv > 1) {
		inaktiv = aktiv - 1;
		document.getElementById("bsp_" + inaktiv).style.display = "none";
	}
	document.getElementById("bsp_" + aktiv).style.display = "block";
	aktiv = aktiv + 1;	
}

</script>



<body onload="Hauptprogramm()">

Was ist hier falsch gelaufen? LG, KS.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Panne bei CSS-Steuerung via Javascript

    Mattes
    +1 Informationen zu den Bewertungsregeln

    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 …

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Panne bei CSS-Steuerung via Javascript

      Der Kommunikationsstratege
      – Informationen zu den Bewertungsregeln

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

      … Deswegen funktioniert dein zur Verfügung gestelltes Skript ja auch so unverschämt problemlos! ;)

      Vielen Dank!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Panne bei CSS-Steuerung via Javascript

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@Der Kommunikationsstratege:

    Was ist hier falsch gelaufen?

    Du verwendest JavaScript für etwas, was mit CSS zu realisieren ist.

    LLAP

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln