[ERLEDIGT] setTimeout Massaker

[austriaman]

Hallo - Es ist wieder mal zum Kinder werfen -
setTimeout benutzt mein Riechorgan als Dancefloor, dass es schon nicht mehr lustig ist.

Die Grundidee klingt dabei so einfach wie sie sich in der Umsetzung als tückisch herausstellt: Ich habe [exemplarisch] eine Reihe von <DIV>s...

<div id="bsp_1" class="bsp"><p>Bsp_1</p></div>
<div id="bsp_2" class="bsp"><p>Bsp_2</p></div>
<div id="bsp_3" class="bsp"><p>Bsp_3</p></div>
<div id="bsp_4" class="bsp"><p>Bsp_4</p></div>

…wobei sich sämtliche <DIV>s via CSS verstecken [.bsp { display: none;}].


Folgender Code sollte nun doch eigentlich dazu führen, dass zuerst „bsp_1“, nach einer Sekunde „bsp_2“, zwei Sekunde danach „bsp_3“ und fünf Sekunden danach „bsp_4“ angezeigt wird.

De facto wird nach einer Sekunde „bsp_4“ angezeigt, des weiteren ignoriert „bsp_1“ die display = „none“ Anweisung.

Javascript:

function Hauptprogramm() {

   var aktiv = 1;

   var Durchlauf_1s;
   var Durchlauf_2s;
   var Durchlauf_5s;

   document.getElementById("bsp_" + aktiv).style.display = "block";
   aktiv++;

   Durchlauf_1s = setTimeout(function() {
   if (aktiv > 1) {
     document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
     document.getElementById("bsp_" + aktiv).style.display = "block";
     }
   }, 1000);
   
   aktiv++;
   
   Durchlauf_2s = setTimeout(function() {
   if (aktiv > 1) {
     document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
     document.getElementById("bsp_" + aktiv).style.display = "block";
     }
   }, 3000);
   
   aktiv++;
   
   Durchlauf_5s = setTimeout(function() {
   if (aktiv > 1) {
     document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
     document.getElementById("bsp_" + aktiv).style.display = "block";
     }
   }, 8000);

}

window.addEventListener("load", Hauptprogramm);

Was läuft hier falsch?
Bin für jede Hilfe zum Thema dankbar!

LG, aut.

 

[Tronjer]

Du kannst dein Script debuggen, in dem du in der Konsole des Browsers entsprechende Breakpoints setzt.

Es wäre aber zuverlässiger, die Funktionen zu queuen, d.h. die jeweils nächste als Callback auf die vorherige aufzurufen. Google mal nach jQuery chain animations.

 

[Sempervivum]

Du inkrementierst die Variable dreimal. Diese Anweisungen werden quasi sofort ausgeführt, so dass die Variable anschließend und später, wenn die Timeouts zuschlagen, den Wert 4 hat. Du musst das Inkrementieren in die Timeout-Funktion übernehmen.

 

[austriaman]

Du inkrementierst die Variable dreimal. Diese Anweisungen werden quasi sofort ausgeführt, so dass die Variable anschließend und später, wenn die Timeouts zuschlagen, den Wert 4 hat. Du musst das Inkrementieren in die Timeout-Funktion übernehmen.

*FIXED* - Danke! :)