如果函数已经运行，我有一个关于让函数不运行的问题

Question

我构建了一个琐事游戏，如果你的时间用完了，那么我编写的函数 score() 会运行你的游戏评分。此功能也与提交按钮相关联。因此，当您完成剩余时间的测验时，就会出现问题；因为一旦你提交分数，如果在你点击之前时间变为零，那么你的分数就会翻倍。

如何解决这个问题；我愿意在计时器函数中修复它或编写另一个函数以防止它进行两次评分。

请注意，重试按钮无法根据要求重置页面，因此我让开始按钮开始倒计时（）（计时器）。

所以我需要的功能是检查分数是否已经运行，如果没有再次运行；那么当你点击开始按钮时，计数必须重置。

var button = document.getElementById("main-button")
var taButton = document.getElementById("ta-button")
var quizText = document.getElementById("quiz")
var correct = 0;
var incorrect = 0;
var notAnswered = 0;
var correctText = document.getElementById("correct-text")
var incorrectText = document.getElementById("incorrect-text")
var notAnsweredText = document.getElementById("notAnswered-text")
var timeLeft = 70;
var timeLeftText = document.getElementById("timeLeft-text")
var elem = document.getElementById('some_div');
var timerId = setInterval(countdown, 1000);












// timer function
function countdown() {
    if (timeLeft == 0) {
        clearTimeout(timerId);       
        score();
    } else {
        timeLeftText.textContent = "Time Remaining " + timeLeft;
        timeLeft--;
    }
    
    function start() {
    document.getElementById("main-button").style.display = "none";
    document.getElementById("quiz").style.display = "block";
    document.getElementById("some_div").style.display = "inline-block";
    timeLeft = 70;
    countdown();    
    timeLeftText.textContent = "Time Remaining " + timeLeft;

}


function score() {
    correct = 0;
    incorrect = 0;
    notAnswered = 0;
    var question1
    var question2 
    var question3 
    var question4 
    var question5 
    var question6 
    var question7 
    var question8 
    var question9
    var question10
// checks if the value of or radio is null.
    if (document.querySelector('input[name="question1"]:checked') === null) { notAnswered++;
    
 }
// if it has a value it logs the value
// then takes the value that was stored to the radio button and clears it; resetting or buttons.
    else { question1 = document.querySelector('input[name="question1"]:checked').value;
    document.querySelector('input[name="question1"]').checked=false;
 
// This checks the value we stored and then determines if it that value is the correct answer.
    if (question1 === "d") {
        correct++;
    }
    else if ((question1 === "a") || (question1 === "b") || (question1 === "c")) {
        incorrect++;
    }}
    // question 2.
    if (document.querySelector('input[name="question2"]:checked') === null) { notAnswered++;
       
     }

    else { question2 = document.querySelector('input[name="question2"]:checked').value;
    document.querySelector('input[name="question2"]').checked=false;
 

    if (question2 === "d") {
        correct++;
    }
    else if (question2 === "a" || "b" || "c") {
        incorrect++;
    }}
//  question 3.
if (document.querySelector('input[name="question3"]:checked') === null) { notAnswered++;
    
 }

else { question3 = document.querySelector('input[name="question3"]:checked').value;
document.querySelector('input[name="question3"]').checked=false;


if (question3 === "a") {
    correct++;
}
else if (question2 === "b" || "c" || "d") {
    incorrect++;
}}
// question 4
if (document.querySelector('input[name="question4"]:checked') === null) { notAnswered++;
    
 }

else { question4 = document.querySelector('input[name="question4"]:checked').value;
document.querySelector('input[name="question4"]').checked=false;


if (question4 === "d") {
    correct++;
}
else if (question4 === "a" || "b" || "c") {
    incorrect++;
}}
// question 5
if (document.querySelector('input[name="question5"]:checked') === null) { notAnswered++;
    
 }

else { question5 = document.querySelector('input[name="question5"]:checked').value;
document.querySelector('input[name="question5"]').checked=false;


if (question5 === "d") {
    correct++;
}
else if (question5 === "a" || "b" || "c") {
    incorrect++;
}}
// question 6
if (document.querySelector('input[name="question6"]:checked') === null) { notAnswered++;
    
 }

else { question6 = document.querySelector('input[name="question6"]:checked').value;
document.querySelector('input[name="question6"]').checked=false;


if (question6 === "c") {
    correct++;
}
else if (question6 === "a" || "b" || "c") {
    incorrect++;
}}
//  question 7
if (document.querySelector('input[name="question7"]:checked') === null) { notAnswered++;
   
 }

else { question7 = document.querySelector('input[name="question7"]:checked').value;
document.querySelector('input[name="question7"]').checked=false;


if (question7 === "a") {
    correct++;
}
else if (question7 === "a" || "b" || "c") {
    incorrect++;
}}
// question 8
if (document.querySelector('input[name="question8"]:checked') === null) { notAnswered++;
    
 }

else { question8 = document.querySelector('input[name="question8"]:checked').value;
document.querySelector('input[name="question8"]').checked=false;


if (question8 === "b") {
    correct++;
}
else if (question8 === "a" || "b" || "c") {
    incorrect++;
}}
// question 9
if (document.querySelector('input[name="question9"]:checked') === null) { notAnswered++;
   
 }

else { question9 = document.querySelector('input[name="question9"]:checked').value;
document.querySelector('input[name="question9"]').checked=false;


if (question9 === "c") {
    correct++;
}
else if (question9 === "a" || "b" || "c") {
    incorrect++;
}}
// question10
if (document.querySelector('input[name="question10"]:checked') === null) { notAnswered++;
    
 }

else { question10 = document.querySelector('input[name="question10"]:checked').value;
document.querySelector('input[name="question10"]').checked=false;


if (question10 === "c") {
    correct++;
}
else if (question10 === "a" || "b" || "c") {
    incorrect++;
}}
    // this toggles what is visible on their screen.
    document.getElementById("quiz").style.display = "none";
    document.getElementById("scoreBox").style.display = "block";
    document.getElementById("some_div").style.display = "none";
    document.getElementById("ta-button").style.display = "inline-block";
    // this is the text for our score box
    correctText.textContent = "Correct " + correct;
    incorrectText.textContent = "Incorrect " + incorrect;
    notAnsweredText.textContent = "Not Answered " + notAnswered;
    

}

function reset() {
    // this toggles what is visible on their screen.
    document.getElementById("quiz").style.display = "none";
    document.getElementById("some_div").style.display = "none";
    document.getElementById("ta-button").style.display = "none";
    document.getElementById("scoreBox").style.display = "none";
    document.getElementById("main-button").style.display = "block";
    // this resets the score
    correct = 0;
    incorrect = 0;
    notAnswered = 0;
    // allows the start button to be clicked up to 20 mins after the ta button, so that the score function does start before the game.
    timeLeft = 12000;
    

}

<div id="button-container">
                            <div id="ta-button">
                                <p id="main-button"><button type="button" class=" btn-lg btn-block text-light "
                                onclick="reset()"><i class="fas fa-sync"></i> Try Again? <i class="fas fa-sync"></i></button></p>
                                </div>
                        </div>

<div id="button-content" class="container">
                <p id="main-button"><button type="button" class=" btn-lg btn-block text-light "
                        onclick="start();countdown()"><i class="fas fa-user-astronaut"></i> Start
                        Quiz. <i class="fas fa-user-astronaut"></i></button></p>
                        
                </div>
            

Answer 1

试试这个。

var timerId = null;
    var timeLeft = 70;
    function countDown() {
        if (timerId) {
            clearTimeout(timerId);
        }

        //do what ever
        if (timeLeft < 1) {
            //do something else

            //then return
            return 0;
        }
        else {
            timerId = setTimeout(countDown, 1000);
        }
    }

    function start() {
        //do whatever

        timerId = setTimeout(countDown, 1000);
    }

如果您需要有关 javascript 中计时器的更多信息，请查看 https://www.w3schools.com/jsref/met_win_settimeout.asp