Блог

Главная - Вопросы по программированию - HTML / Javascript медленно / сбой в приложении для викторины

HTML / Javascript медленно / сбой в приложении для викторины

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня проблема с моей полностью функционирующей викториной. Похоже, что проблемы с сбоями / медленной загрузкой возникают примерно после 5 или 6 (из 10) вопросов. Это очень странно, потому что, если я отвечу на все в течение секунды (нереально, но для проверки ошибок), проблем не будет. Но как только я беру «нормальное» количество времени, чтобы ответить на вопросы, все замедляется, и в конечном итоге происходит сбой / застревание.

Я пытался удалить анимацию и настроить поток моего JS, но безрезультатно. Если у кого-нибудь есть какие-либо мысли, они будут высоко оценены!

Вот ссылка на сам сайт: https://louparker.github.io/random-music-quiz/index.html

Вот ссылка на репозиторий: https://github.com/louparker/random-music-quiz

 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 mechanics

let currentQuestion = {};
let takingAnswers = true;
let score = 0;
let questionCounter = 0;
let availableQuestions = {};
let fetchingData = true;
let acceptingAnswers = true;

//taking data from API
fetch(`https://opentdb.com/api.php?amount=10amp;category=12amp;difficulty=${gameDifficulty}amp;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 question
function restartInterval(){
    let seconds = document.getElementById("timer").textContent;
    let countdown = setInterval(function() {
        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 page
const startGame = () => {
    questionCounter = 0;
    score = 0;
    availableQuestions = [...questions];
    getNewQuestion();
};

//giving specific scores based on gae difficulty
const 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 not
choices.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 element
const incrementScore = (num) => {
    score  = num;
    scoreText.innerHTML = score;
};


//grabbing new question data and assigning score for gameover page
const 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;

}; 
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="The game page of quiz game about music">
        <title>Game</title>
        <!-- styles -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" href="https://louparker.github.io/random-music-quiz/assets/css/app.css">
        <link rel="stylesheet" href="https://louparker.github.io/random-music-quiz/assets/css/game.css">
    </head>
    <body>
        <main>
            <div class="container-fluid text-center d-flex">
                <div id="loader" class="spinner">
                    <div class="dot1"></div>
                    <div class="dot2"></div>
                </div>
                <div id="game" class="hidden">
                    <!-- heads up display (HUD) -->
                    <div class="row">
                        <div class="col-12">
                            <div class="hud__container d-flex">
                                <div class="hud__btn d-flex hvr-pulse-shrink">
                                    <a href="index.html" class="exit__btn">X</a>
                                </div>
                                <div class="hud__btn d-flex">
                                    <p class="timer" id="timer">30</p>
                                    <span class="timer__label">TIME</span>
                                </div>
                                <div class="hud__btn d-flex">
                                    <p class="scoreboard" id="score">0</p>
                                    <span class="score__label">SCORE</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- game question -->
                    <div class="row">
                        <div class="col-12">
                            <div class="game__question d-flex">
                                <p class="question-text" id="question"></p>
                            </div>
                        </div>
                    </div>

                    <!-- answer choices -->
                    <div class="row">
                        <div class="col-12">
                            <div class="answer-choices__container d-flex">
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="1">
                                    </p>
                                </div>
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="2">
                                    </p>
                                </div>
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="3">
                                    </p>
                                </div>
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="4">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- scripts --> 
        <!--<script src="js/game.js"></script>-->
    </body>
</html>

Заранее спасибо!

Комментарии:

1. опубликуйте свой код!

2. теперь код в исходном сообщении!

3. Кажется, он всегда застревает на 29 секундах, верно? Итак, для меня это означает, что у вас есть код, который повторно устанавливает оставшееся время на 30 секунд, а другой таймер уменьшает его до 29 секунд, и оба продолжают срабатывать. Я бы предложил добавить некоторые записи для подтверждения и отладки того, что вызывает это.

4. да! спасибо, я проведу расследование и, надеюсь, найду решение 🙂

Ответ №1:

О, оказывается, у вас действительно большая проблема с рекурсией. В своем интервале обратного отсчета вы предоставляете слушателям событий выбор и очищаете интервал, как хороший программист, но затем вы забыли, что находитесь в forEach . Поэтому, когда позже вы вызываете свою restartInterval функцию, вы фактически делаете это четыре раза. Я думаю, вы можете себе представить, что происходит при шестом вопросе с 24 интервалами, выполняемыми одновременно.

PS при работе с интервалами всегда проверяйте, что запущены только те, которые вы намеревались запустить. Хороший способ проверки simple console.log() — это, как вы видите во фрагменте ниже.

 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 mechanics

let currentQuestion = {};
let takingAnswers = true;
let score = 0;
let questionCounter = 0;
let availableQuestions = {};
let fetchingData = true;
let acceptingAnswers = true;

//taking data from API
fetch(`https://opentdb.com/api.php?amount=10amp;category=12amp;difficulty=${gameDifficulty}amp;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 question
function 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 page
const startGame = () => {
    questionCounter = 0;
    score = 0;
    availableQuestions = [...questions];
    getNewQuestion();
};

//giving specific scores based on gae difficulty
const 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 not
choices.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 element
const incrementScore = (num) => {
    score  = num;
    scoreText.innerHTML = score;
};


//grabbing new question data and assigning score for gameover page
const 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;

}; 
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="The game page of quiz game about music">
        <title>Game</title>
        <!-- styles -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" href="https://louparker.github.io/random-music-quiz/assets/css/app.css">
        <link rel="stylesheet" href="https://louparker.github.io/random-music-quiz/assets/css/game.css">
    </head>
    <body>
        <main>
            <div class="container-fluid text-center d-flex">
                <div id="loader" class="spinner">
                    <div class="dot1"></div>
                    <div class="dot2"></div>
                </div>
                <div id="game" class="hidden">
                    <!-- heads up display (HUD) -->
                    <div class="row">
                        <div class="col-12">
                            <div class="hud__container d-flex">
                                <div class="hud__btn d-flex hvr-pulse-shrink">
                                    <a href="index.html" class="exit__btn">X</a>
                                </div>
                                <div class="hud__btn d-flex">
                                    <p class="timer" id="timer">30</p>
                                    <span class="timer__label">TIME</span>
                                </div>
                                <div class="hud__btn d-flex">
                                    <p class="scoreboard" id="score">0</p>
                                    <span class="score__label">SCORE</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- game question -->
                    <div class="row">
                        <div class="col-12">
                            <div class="game__question d-flex">
                                <p class="question-text" id="question"></p>
                            </div>
                        </div>
                    </div>

                    <!-- answer choices -->
                    <div class="row">
                        <div class="col-12">
                            <div class="answer-choices__container d-flex">
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="1">
                                    </p>
                                </div>
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="2">
                                    </p>
                                </div>
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="3">
                                    </p>
                                </div>
                                <div class="choice__container d-flex">
                                    <p class="choice__text" data-number="4">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- scripts --> 
        <!--<script src="js/game.js"></script>-->
    </body>
</html>