Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

async functions on hold are executing immediately instead of respecting the await keyword

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

        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);
  });
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading