Herzlichen Dank für Deine Mühe! Ich habe mir Dein Dokument aus CodePen gespeichert und kann daraus eine Menge lernen, was die Optimierung des Codes angeht. Wie ich sehe, hast Du eine Intervallfunktion statt der Timeouts benutzt, offensichtlich die viel bessere Lösung.
Was das clearTimeout in meinem Dokument angeht, stehe ich auf dem Schlauch. Aber vielleicht muss ich das auch gar nicht mehr verstehen, denn ... siehe oben. 
Dein Code könnte man auf viele verschiedene Wege schreiben.
Meiner ist sicherlich auch nicht der beste.
Auch ist die Frage, ob man Interval oder Timeout nutzen sollte.
Oder ob man mehrere Timer nutzt, wie du es gemacht hast, oder mit Umwegen mit einem wie ich es gemacht habe.
Wie gesagt, Wege gibt es viele.
In Javascript ist Sempervivum der Profi hier.
Wäre mal schön zu wissen, was er sagt, wie er das machen würde.
Ich habe einfach mal versucht dein Code so weit zu kürzen , ohne das irgendeine Funktion von dir verloren geht, die du da benutzt.
In der CSS könnte man auch noch Kleinigkeiten ändern.
Ich glaube das ich es nicht mehr kürzer hinbekomme, außer mit jQuery
ZitatIn Javascript ist Sempervivum der Profi hier.
Wäre mal schön zu wissen, was er sagt, wie er das machen würde.
An sich gern aber im Moment zu viele andere Dinge zu tun.
Zitatin jedem Fall gilt doch: je kürzer, desto besser.
Da stimme ich nur bedingt zu: Abgesehen von Variablen wie i und skurrilen Wettbewerben namens "Codegolfing" ziehe ich Klarheit und Lesbarkeit der Kürze vor, auch wenn es um sprechende Variablennamen geht. Also, wie anfangs vorgeschlagen, eine Status-Variable mit den Werten "zeigeFrage" und "zeigeAntwort" oder wenn man ein boolean nimmt, einen Namen, der angibt, was drin steht, z. B. let zeigeAntwort = false; Ist diese false gilt dann "zeigeFrage".
Was Klarheit und Lesbarkeit betrifft, ist deine Lösung, Failix aus #17 IMO im Vorteil, weil man sehr schnell erkennt, was Du vor hast. Will man die Timer stoppen, sehe ich jedoch den Nachteil, dass es gleich 4 Timervariablen gibt. Als Alternative zu setInterval und einer Statuskennung möchte ich eine Lösung vorschlagen, die, wie die Fragen und Antworten, auf einem Array basiert:
const sequence = [
{ delay: 50, callback: myTimeout1 },
{ delay: 500, callback: myTimeout2 },
{ delay: 3000, callback: myTimeout3 },
{ delay: 1500, callback: myTimeout4 },
];
function doIt() {
timer = setTimeout(() => {
sequence[idx].callback();
idx++;
if (idx < sequence.length) {
doIt();
}
}, sequence[idx].delay)
}
let idx = 0,
timer;
doIt();(ungetestet)
Auf das Problem mit den Timern hatte ich jetzt gar nicht das Augenmerk gerichtet, sondern wollte nur eine Alternative zu der Endphase vorschlagen. Die Timer-ID steht dort in der Variablen timer und damit kannst Du das setTimeout, das jeweils aktiv ist, abbrechen.
ZitatDie gesamte Funktion "doIt" ist mir derzeit noch ein Rätsel, ich begreife beim besten Willen nicht, was sie tut
Ich werde ein paar Kommentare hinein schreiben, damit es verständlich wird.
ZitatIch dachte, ich könne den Abbruch der verzögerten Funktionen einfach auf den nächsten Mausklick legen, aber das scheint nicht richtig zu sein ...
Doch, das ist schon richtig. Du hast ja die ID des jeweiligen Timers in der Variablen timer . Dann brauchst Du nur clearInterval aufzurufen, um den Timer zu stoppen:
if (timer) {
clearTimeout(timer);
}Und das kannst Du innerhalb des Eventlisteners für den Klicker tun.
Hier das Javascript mit Kommentaren:
function myTimeout1() {
document.getElementById('lastwords').style.display = 'inline-block';
}
function myTimeout2() {
document.getElementById('lastwords').classList.add('morecolor');
document.getElementById('questionAnswers').classList.add('lesscolor');
}
function myTimeout3() {
document.getElementById('clicker').innerHTML = again;
}
function myTimeout4() {
document.getElementById('clicker').style.backgroundColor = 'none';
document.getElementById('clicker').classList.add('blink');
}
const sequence = [
{
// Die Zeit, um die der Aufruf der Funktion (callback)
// verzögert werden soll:
delay: 50,
// Die Funktion, die aufgerufen werden soll:
callback: myTimeout1
},
{ delay: 500, callback: myTimeout2 },
{ delay: 3000, callback: myTimeout3 },
{ delay: 1500, callback: myTimeout4 },
];
// Bearbeitet jeweils einen Eintrag im Array sequence:
function doIt() {
// Die aktuelle Aktion wird nach der gewünschten Verzögerung ausgeführt:
timer = setTimeout(() => {
// Die Funktion aufrufen, die im aktuellen Datensatz in dem Array
// sequence als callback eingetragen ist, z. B. myTimeout2
// beim zweiten Datensatz:
sequence[idx].callback();
// Index für das Array sequence erhöhen:
idx++;
// Sind wir noch nicht am Ende des Arrays sequence angelangt?
if (idx < sequence.length) {
// Den aktuellen Eintrag im Array (nach Erhöhen des Index)
// bearbeiten:
doIt();
}
}, sequence[idx].delay)
// Der zweite Parameter beim Aufruf der Funktion setTimeout ist die Verzögerungszeit.
// Diese ist im Array sequence unter delay eingetragen, z. B. 500
// beim zweiten Datensatz.
}
let
// Wir beginnen mit dem ersten Datensatz in sequence,
// also den Index auf 0 setzen:
idx = 0,
// Timervariable, hier wird die ID des aktuellen Timers
// gespeichert, wir brauchen sie, um den Timer abbrechen zu können:
timer;
// Jetzt beginnen wir die Sequenz durch den Aufruf der Funktion doIt:
doIt();Im Moment habe ich mehrere Aktivitäten laufen, daher habe ich meinen Grundsatz, das was ich poste auch zu erklären, leider zunächst vernachlässigt.
Ich kann mich gar nicht oft genug bedanken ... die Kommentare sind extrem hilfreich, und ich habe alles verstanden bis auf die vielleicht wichtigste Aussage:
// Timervariable, hier wird die ID des aktuellen Timers
// gespeichert, wir brauchen sie, um den Timer abbrechen zu können:
timer;Die Konsole sagt mir, dass nach dem ersten Durchlauf die Zahlen 2, 3 und 4 in dieser Variablen stehen, nach dem zweiten Durchlauf 6, 7 und 8. Warum aber keine 1 und keine 5?
Und was mir völlig unklar ist: Wie kann ich diese Variable nutzen, um den Timer abbrechen zu können? Muss ich dazu noch weiteren Code schreiben?
Und kann ein Mensch so blöd sein wie ich? 
Die Inhalte der Timervariablen werden Javascript-intern geführt, die muss man nicht verstehen. Du brauchst sie jedoch, um einen laufenden Timer abbrechen zu können, siehe #29
if (timer) {
clearTimeout(timer);
}Bei mir in Opera funktioniert der Debugger einwandfrei. Sehr sporadisch habe ich das Problem, dass er sich irgend wie verklemmt und ich muss dann den Tab schließen und die Seite neu öffnen oder sogar den Browser neu starten. Aber bei dir scheint ja das Problem dauerhaft zu bestehen.
Gut, dass Du dieses GIF angehängt hast, daran erkennt man nämlich, dass das ein Missverständnis ist und das Verhalten normal. Es geht ja um diesen Code:
// Mit der folgenden Zeile wird der Eventlistener registriert:
document.getElementById('clicker').addEventListener('click', () => {
// Ab hier beginnt das Innere der anonymen Funktion. Hier gelangt man erst hin wenn das Event feuert
// und die Funktion aufgerufen wird, beim Laden der Seite jedoch noch nicht. Setze auf die folgende
// Zeile einen Haltpunkt, dann kannst Du dich davon überzeugen.
if (status === 'showQuestion') {
document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].question + '</p>';
status = 'showAnswer';
document.getElementById('clicker').classList.remove('blink');
document.getElementById('clicker').style.backgroundColor = 'dodgerblue';
document.getElementById('lastwords').classList.remove('morecolor');
document.getElementById('questionAnswers').classList.remove('hidden');
document.getElementById('questionAnswers').classList.remove('lesscolor');
let question = 'zur ' + (counter + 1) + '. Antwort';
document.getElementById('clicker').innerHTML = question;
}
else {
document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].answer + '</p>';
status = 'showQuestion';
document.getElementById('clicker').style.backgroundColor = 'teal';
let answer = 'zur ' + (counter + 2) + '. Frage';
document.getElementById('clicker').innerHTML = answer;
counter++;
if (counter === questionsAndAnswers.length && status === 'showQuestion') {
counter = 0;
document.getElementById('clicker').innerHTML = 'Ende!';
function myTimeout1() {
document.getElementById('lastwords').style.display = 'inline-block';
}
function myTimeout2() {
document.getElementById('lastwords').classList.add('morecolor');
document.getElementById('questionAnswers').classList.add('lesscolor');
}
function myTimeout3() {
document.getElementById('clicker').innerHTML = again;
}
function myTimeout4() {
document.getElementById('clicker').style.backgroundColor = 'none';
document.getElementById('clicker').classList.add('blink');
}
const sequence = [
{
// Die Zeit, um die der Aufruf der Funktion (callback)
// verzögert werden soll:
delay: 50,
// Die Funktion, die aufgerufen werden soll:
callback: myTimeout1
},
{ delay: 500, callback: myTimeout2 },
{ delay: 3000, callback: myTimeout3 },
{ delay: 1500, callback: myTimeout4 },
];
// Bearbeitet jeweils einen Eintrag im Array sequence:
function doIt() {
// Die aktuelle Aktion wird nach der gewünschten Verzögerung ausgeführt:
timer = setTimeout(() => {
// Die Funktion aufrufen, die im aktuellen Datensatz in dem Array
// sequence als callback eingetragen ist, z. B. myTimeout2
// beim zweiten Datensatz:
sequence[idx].callback();
// Index für das Array sequence erhöhen:
idx++;
// Sind wir noch nicht am Ende des Arrays sequence angelangt?
if (idx < sequence.length) {
// Den aktuellen Eintrag im Array (nach Erhöhen des Index)
// bearbeiten:
doIt();
console.log(timer)
}
}, sequence[idx].delay)
// Der zweite Parameter beim Aufruf der Funktion setTimeout ist die Verzögerungszeit.
// Diese ist im Array sequence unter delay eingetragen, z. B. 500
// beim zweiten Datensatz.
}
let
// Wir beginnen mit dem ersten Datensatz in sequence,
// also den Index auf 0 setzen:
idx = 0,
// Timervariable, hier wird die ID des aktuellen Timers
// gespeichert, wir brauchen sie, um den Timer abbrechen zu können:
timer;
// Jetzt beginnen wir die Sequenz durch den Aufruf der Funktion doIt:
doIt();
document.getElementById('clicker').addEventListener('click', () => {
if (timer) {
clearTimeout(timer);
}
});
}
}
}); // Hier ist jetzt das Registrieren des Eventlisteners beendet und wenn
// weitere Anweisungen vorhanden wären, würde der Debugger beim Stepping
// dort wieder anhalten.Ich habe wieder Kommentare hinein geschrieben, nur am Anfang und am Ende, dazwischen wollte ich nicht löschen, um mit den Klammern nicht durcheinander zu kommen.
Vielen Dank ... ich kapiere nur mal wieder nichts.
Du schreibst im Kommentar: "Setze auf die folgende Zeile einen Haltpunkt, dann kannst Du dich davon überzeugen." Das habe ich gemacht, ohne dass sich – außer dem blauen Symbol links auf der Zeilennummer – irgendwas geändert hätte. Der Debugger läuft genauso wie vorher, am Breakpoint passiert nichts.
Gerade lese ich (nach Googeln) bei mediaevent.de: "Nachteile anonymer Funktionen ... Testen und debuggen von anonymen Funktionen ist nicht einfach" Ich habe ehrlich gesagt gerade das Gefühl, dass ich nicht wirklich weiß, was ich tue ...
Hast Du auch auf den Button geklickt? Dann erst feuert nämlich das Event und die Funktion wird aufgerufen.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!