Блог

Главная - Вопросы по программированию - Как использовать clearInterval() и location.reload()?

Как использовать clearInterval() и location.reload()?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня возникли некоторые проблемы с правильной запуском моего приложения. Это простое приложение с простым таймером обратного отсчета. Моя проблема в том, что когда я хочу сбросить игру (перезагрузить страницу), когда setInterval() она запущена, она работает. Но, если setInterval() остановлено clearInterval() и отображается мой элемент Game Over, если я нажму сброс, ожидая вызова location.reload() , страница АВТОМАТИЧЕСКИ снова запускает таймер. Это какая-то проблема с циклом, которую я, похоже, не могу найти, но, может быть, вы, профессионалы, сможете обнаружить ошибку в моем коде.

Я пытался провести рефакторинг своего кода несколькими способами, чтобы изолировать ошибку, но, похоже, я не могу ее найти.

 // DOM ELEMENTS ========================================================

const startReset    = document.getElementById("startReset");
const scoreValue    = document.getElementById("score");
const timer         = document.getElementById("timer");
const timerValue    = document.getElementById("timerValue");
const gameOver      = document.getElementById("gameOver");
const correct       = document.getElementById("correct");
const wrong         = document.getElementById("correct");


// GLOBAL GAME VARIABLES ===============================================

let playing = false;
let score;
let action;
let timeRemaining;

// GAME OPERATIONS =====================================================

// Start/Reset Game
startReset.onclick = function() {
    // Reset Game
    if(playing === true) {

        // Reload page
        location.reload();

    } 
        // Start Playing
        else {
            // Change mode from not playing to playing
            playing = true;

            // Take Away Game Over Element
            gameOver.style.visibility = "hidden";

            // Change start button to reset button
            startReset.innerHTML = "Reset Game";

            // Put score back to 0
            score = 0;

            // Update HTML with score
            scoreValue.innerHTML = score;

            // Display timer
            timer.style.display = "block";
            timeRemaining = 60;

            // Start Countdown
            startCountdown();
        }
}

// Start Countdown Function
const startCountdown = () => {
    // Set timer
    action = setInterval(function(){
        // reduce time by 1 sec
        timeRemaining -= 1;
        // update html
        timerValue.innerHTML = timeRemaining;
        // check if time is out
        if(timeRemaining === 0) {
            stopCountdown();
            gameOver.style.visibility = "visible";
            timer.style.display = "none";
            correct.style.display = "none";
            wrong.style.display = "none";
            playing = false;
        }
    }, 100);
};

// Stop Countdown Function
const stopCountdown = () => {
    clearInterval(action);
};
=============================================================
    <body>
        <div id="logoContainer">
            <img src="./images/gotLogo.png">
            </div>

        <div id="container">

            <div id="scoreCounter">
                Score: <span id="score">0</span>
            </div>

            <div id="correct">Correct</div>

            <div id="wrong">Try Again</div>

            <div id="question">
                <p>Click Start to Begin!</p>
            </div>

            <div id="instruction">
                Click on the correct answer!
            </div>

            <div id="choices">

                <div id="choice1" class="choice"></div>
                <div id="choice2" class="choice"></div>
                <div id="choice3" class="choice"></div>
                <div id="choice4" class="choice"></div>

            </div>

            <div id="startReset">
                Start Game
            </div>

            <div id="timer">
                Time Remaining: <span id="timerValue">60</span> sec
            </div>

            <div id="gameOver">
                <p>GAME OVER!</p>
                <p>YOUR SCORE IS: <span id="finalScore">0</span></p>
            </div>
        </div>

    <script src="app.js" type="text/javascript"></script>
    </body>

</html>

Я ожидаю, что нажатие на сброс игры после Game Over появления перезагрузит страницу и заставит новый щелчок запустить игру, однако он перезагружает страницу и АВТОМАТИЧЕСКИ перезапускает таймер. Если я нажимаю Reset Game во время работы таймера, он работает так, как ожидалось.

Ответ №1:

Ответ найден. Возможно, это поможет другим.

В моей функции startCountdown() в операторе if я изначально сбросил значение playing = false, что привело к замыканию моей условной логики для функции onclick, объявленной выше в разделе Запуск / сброс игры. Устранение этого позволило игре работать должным образом!

Метки: