HTML/Javascript slow/crashing on quiz app

Question

I have a problem with my otherwise fully functioning quiz game. There seems to be crashing/slow loading issues after around 5 or 6 (out of 10) questions. Its very strange because if I answer everything within a second (unrealistic but to error check), there is no problem. But as soon as I take a "normal" amount of time to answer

Accepted Answer

Oookey it turns out you have a really big recursion problem.In your countdown interval you give event listeners to the choices and you clear the interval like a good programmer, but then you have forgot that you are in a forEach. So when later you call your restartInterval function you actually do it four times.I think that you can imagine what happens at the sixth question with the 24 intervals running at the same time.P.S. when you work with intervals always check that only those are running that you intended to run. A god way of checking is a simple console.log() as you see in the snippet down below. const question = document.getElementById("question");const choices = Array.from(document.getElementsByClassName("choice__text"));const scoreText = document.getElementById('score');const timer = document.getElementById("timer");const game = document.getElementById("game");const loader = document.getElementById("loader");const gameDifficulty = window.location.search.replace("?mode=", "");/* STARTING GAME *///game mechanicslet currentQuestion = {};let takingAnswers = true;let score = 0;let questionCounter = 0;let availableQuestions = {};let fetchingData = true;let acceptingAnswers = true;//taking data from APIfetch(`https://opentdb.com/api.php?amount=10&category=12&difficulty=${gameDifficulty}&type=multiple`) .then(res => { return res.json(); })//taking question data from API and formatting it to be used .then((loadedQuestions) => { questions = loadedQuestions.results.map((loadedQuestion) => { const formattedQuestion = { question: loadedQuestion.question, };//taking answer data and choosing random place for corrent and incorrent answers const answerChoices = [...loadedQuestion.incorrect_answers]; formattedQuestion.answer = Math.floor(Math.random() * 4) + 1; answerChoices.splice( formattedQuestion.answer - 1, 0, loadedQuestion.correct_answer ); answerChoices.forEach((choice, index) => { formattedQuestion['choice' + (index + 1)] = choice; }); return formattedQuestion; });// timer//function to start the timer on end of current time or start of new questionfunction restartInterval(){ let seconds = document.getElementById("timer").textContent; let countdown = setInterval(function() { seconds--; console.log(seconds);//new question timer restart function choices.forEach((choice) => { choice.addEventListener('click', (e) => { clearInterval(countdown); timer.innerText = "30"; restartInterval(); }); });//timer reaches zero restart function document.getElementById("timer").textContent = seconds; if (seconds <= 0) { clearInterval(countdown); getNewQuestion(); timer.innerText = "30"; restartInterval(); } }, 1000);}//confirming game data is all loaded, showing the game page and removing the loading screen fetchingData = false; setTimeout( () => { game.classList.remove("hidden"); loader.classList.add("hidden"); startGame(); restartInterval(); }, 1000); }) .catch((err) => { console.error(err); });//base set up for loading the game pageconst startGame = () => { questionCounter = 0; score = 0; availableQuestions = [...questions]; getNewQuestion();};//giving specific scores based on gae difficultyconst levelScore = gameDifficulty === "easy" ? 10 : gameDifficulty === "medium" ? 20 : 30;const maxQuestions = 10;let baseUrl ="https://louparker.github.io/random-music-quiz";//checking if answers are correct or notchoices.forEach((choice) => { choice.addEventListener('click', (e) => { if (!takingAnswers) return; acceptingAnswers = false; const selectedChoice = e.target; const selectedAnswer = selectedChoice.dataset.number; const classToApply = selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; if (classToApply === "correct") { incrementScore(levelScore); } selectedChoice.parentElement.classList.add(classToApply); setTimeout(() => { selectedChoice.parentElement.classList.remove(classToApply); getNewQuestion(); }, 1000); });});//adds specified score to score elementconst incrementScore = (num) => { score += num; scoreText.innerHTML = score;};//grabbing new question data and assigning score for gameover pageconst getNewQuestion = () => { if (availableQuestions.length === 0 || questionCounter >= maxQuestions) { localStorage.setItem("mostRecentScore", score); return window.location.replace(`${baseUrl}/gameover.html?mode=${gameDifficulty}`); } questionCounter ++; const questionIndex = Math.floor(Math.random() * availableQuestions.length); currentQuestion = availableQuestions[questionIndex]; question.innerHTML = currentQuestion.question; choices.forEach((choice) => { const number = choice.dataset.number; choice.innerHTML = currentQuestion['choice' + number]; }); availableQuestions.splice(questionIndex, 1); takingAnswers = true;}; Game

Advertisement

Answer