如何使用clearInterval（）和location.reload（）？

Question

我无法让我的应用程序正常运行。 这是一个琐事应用程序，有一个简单的倒计时器。 我的问题是当我想在setInterval()运行时重置游戏（重新加载页面）时，它可以工作。 但是，如果setInterval()被clearInterval()停止并且我的Game Over元素显示，如果我点击Reset，期望调用location.reload() ，页面AUTOMATICALLY会再次启动计时器。 这是我似乎无法找到的某种循环问题，但也许你的专业人员可以发现我的代码中的错误。

我曾尝试以多种方式重构我的代码以隔离错误，但我似乎无法找到它。

// 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 ，它将按预期工作。

Answer 1

找到答案。 也许这会有助于其他人。

在我的startCountdown（）函数中，在if语句中，我最初重置了playing = false，这使得我在开始/重置游戏下声明的onclick函数的条件逻辑短路。 拿走它让游戏正常运作！

如何使用clearInterval（）和location.reload（）？

问题描述

1 个解决方案

解决方案1
0 2019-04-19 15:52:05

如何使用clearInterval（）和location.reload（）？

问题描述

1 个解决方案

解决方案1 0 2019-04-19 15:52:05

解决方案1
0 2019-04-19 15:52:05