Destructor: setInterval läuft Amok

Beitrag lesen

Hallo - Es ist wieder mal zum Kinder werfen. setInterval läuft mir davon und ich weiß einfach nicht, was da genau falsch läuft... (ARGH)

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;}].

Via setInterval soll nun "bsp_1" 3 Sekunden, "bsp_2" und "bsp_3" 5 Sekunden angezeigt werden, bevor das Programm permanent auf "bsp_4" landet.

UND DAS GEHT [offenbar NICHT] SO:

<script type="text/javascript">


function Hauptprogramm() {
  
  /* Variablen für die Durchläufe werden definiert */
  
  var Durchlauf_3s;
  var Durchlauf_5s_1;
  var Durchlauf_5s_2;
  
  
  /* Variable "aktiv" [definiert, welches DIV anzuzeigen und welches zu verstecken ist] */
  
  var aktiv = 1;
  
  /* Das erste DIV wird aktiviert bzw. angezeigt */
  document.getElementById("bsp_" + aktiv).style.display = "block";
  
  /* aktiv wird auf 2 gesetzt */
  aktiv += 1;
  
  
  /* setInterval: Wenn "aktiv" größer 1 ist [ist der Fall], so wird "aktiv" minus 1
  [daher das gerade aktivierte bzw. angezeigt DIV] versteckt und "aktiv" [jetzt 2] angezeigt.
  Dies soll nach einem Interval von 3 Sekunden geschehen [siehe unten].
  */
  
  Durchlauf_3s = setInterval(function () {
    if (aktiv > 1) {
       document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
    }
    document.getElementById("bsp_" + aktiv).style.display = "block";
    
	/* aktiv wird auf 3 gesetzt */
	aktiv += 1;
		
	/* Das Interval wird nach einem Durchlauf beendet. */
    clearInterval(Durchlauf_3s);
    
  }, 3000) // nach einem Interval von 3 Sekunden


/* 2. Durchlauf: funktioniert analog zum 1. Durchlauf.
*/

Durchlauf_5s_1 = setInterval(function () {
    if (aktiv > 1) {
       document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
    }
    document.getElementById("bsp_" + aktiv).style.display = "block";
    aktiv += 1;
    clearInterval(Durchlauf_5s_1);
  }, 5000) 


  /* 3. Durchlauf */

Durchlauf_5s_2 = setInterval(function () {
    if (aktiv > 1) {
       document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
    }
    document.getElementById("bsp_" + aktiv).style.display = "block";
    aktiv += 1;
    clearInterval(Durchlauf_5s_2);
  }, 5000)
  
}
window.addEventListener("load", Hauptprogramm);

</script>

Das Resultat: Bsp_1 wird noch drei Sekunden angezeigt, danach springt das Programm auf Bsp_2, um in weiterer Folge sofort auf Bsp_4 zu landen...

...was läuft hier verkehrt?!

Danke für eure Analysen! Destructor.