I’m not good with Promises and async function and I think I have no clue what I’m doing.
For a quiz app, the logic I try to use is when an answer is given, it should change it’s background to the user so he/she knows the answer was correct, after 3 seconds, the divs should be cleared and when they are gone, the current question should be delete from the possible questions object and a new question should be given.
However, the moment I give an answer, it immediately deletes the divs and gives me the next question while there should be some time inbetween.
If someone can clean up my code or give me an explaination why it’s not working, I would thank you to the bottom of my heart!
My Code:
const playTheGame = async () => {
//Takes the divs where the possible answers are stored
const divs = options.querySelectorAll('div');
for (let i = 1; i < options.childNodes.length; i++) {
const element = options.childNodes[i];
// Click on an answer so it can be evaluated
element.addEventListener('click', () => {
id = Array.from(divs).indexOf(element);
// If the answer is correct, background should become green
if (id === correct) {
console.log('answered correctly!')
divs[id].classList.add('correct');
} else {
console.log('answered correctly!')
}
// Function to delete the divs after 3 seconds
async function deleteDivs() {
for (const option of options.querySelectorAll('div')) {
setTimeout(option.remove(), 3000)
}
}
// Function to start the deleteDivs-function; remove the current question and give a new question
async function endHandler() {
await deleteDivs()
await availableQuestions.shift()
await newQuestion();
}
endHandler()
});
};
};
>Solution :
setTimeout only register a callback, and return a timer id. setTimeout iteself has nothing to do with Promise or async/await;
You can try this way to return a Promise from deleteDivs:
// Function to delete all the divs after 3 seconds
async function deleteDivs() {
return new Promise((resolve) => {
setTimeout(() => {
for (const option of options.querySelectorAll("div")) {
option.remove();
}
resolve();
}, 3000);
});
}