Destructor: setInterval läuft Amok

Beitrag lesen

Ach du liebe Zeit.

Ich wollte Vorschau, nicht speichern (bitte um Entschuldigung!).

Hier nochmals der Code, korrekt formatiert:

Html:

<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>

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);