Vielleicht interessiert es den einen oder anderen: Ich bin da auf ein cooles Feature von Javascript gestoßen, das ich bisher noch nicht kannte: Mit dem Schlüsselwort yield kann man nach für nach Werte aus einem Array abholen und dazwischen etwas anderes erledigen ohne dass die Schleife sofort bis zum Ende durchrast. Weder MDN noch SelfHTML noch w3schools haben es mir verständlich gemacht aber hier bei Stackoverflow ist es ganz gut erklärt:
https://stackoverflow.com/ques…eld-keyword-in-javascript
Meine Demo zum Ausprobieren und Verstehen:
Code
<div id="question"></div>
<button id="nextBtn">Next Question</button>
<script>
// from stackoverflow:
function* foo(x) {
while (true) {
x = x * 2;
yield x;
}
}
var g = foo(2);
console.log(g.next()); // -> 4
console.log(g.next()); // -> 4
console.log(g.next()); // -> 4
const questions = ['Question 1', 'Question 2', 'Question 3', 'Question 4'],
questionContainer = document.getElementById('question');
function* quiz(arr) {
for (let item of arr) {
// return item or next question
// and wait for next request:
yield item;
};
}
// get next question:
function getQuestion() {
const question = q.next();
// question.done is indicating that
// there are no more questions left.
// question.value is containing
// the question itself.
if (!question.done) {
questionContainer.textContent = question.value;
} else {
questionContainer.textContent = 'no more questions';
}
}
q = quiz(questions);
document.getElementById('nextBtn').addEventListener('click', getQuestion);
getQuestion();
</script>Man muss beachten, dass dies mit forEach nicht funktioniert, siehe hier: