clearTimeout feuert nicht - Leider schon dringend ;(

[Anne+Kaffeekanne]

Hallo,

ok, wollte jemandem mit ein paar Zeilen Code zum Geburtstag gratulieren, daher die Dringlichkeit.

Ein Code Snippet macht Schwierigkeiten:

WAS DAS SNIPPET TUT:

1. Eine "Ringelrei" genannte Funktion iteriert mittels rekursivem Timeout über ein Array.

2. Das ganze Treiben soll dann von einem Button gestoppt werden, was nicht funktioniert -

rekursives Timeout läuft einfach weiter:

Zugehöriger Code:

<h1 id="Ausgabe"></h1>
<div id="ziel"></div>
<button id="knopf">STOP</button>

const Inhalte = ["Erste Eingabe.", "Zweite Eingabe.", "Dritte Eingabe."];
const Ausgabe = document.getElementById("Ausgabe"); 
const Ziel = document.getElementById("ziel");
let Zaehler = 0;
let RingelspielVar;

function Ringelrei() {
	Ziel.innerHTML = Inhalte[Zaehler];
	if (Zaehler === 2) {
		Zaehler = 0;
	} else {
		Zaehler++;
	}
	let RingelspielVar = setTimeout(Ringelrei, 500);
}

Ringelrei();

function stopRingelrei() {
	clearTimeout(RingelspielVar);
}

const Knopf = document.getElementById("knopf");
Knopf.addEventListener("click", () => {
	stopRingelrei(); // +++ wird ignoriert :( +++
}); 

Vielen Dank an alle, die hier schnell Abhilfe schaffen können! 😀