为什么我的JavaScript倒数计时器偶尔会超速运行？

Question

作为基于Web的教育游戏的一部分，我有一个使用以下代码的倒数计时器。 通常，计时器会从零开始计时，但有时会超时，并从59:59继续倒计时。

有关代码的几点注意事项：

1. countTime是通过下拉菜单设置的全局变量
2. stopCount是由重置按钮设置的全球变量
3. leadZero是用于格式化的外部功能

我知道setTimeout不太准确，但是我会认为remTime> 0条件最终将终止递归，即使它第一次错过了递归也是如此。

无论如何，这是代码：

function newCount() {
    var startTime=new Date();
    var min=startTime.getMinutes();
    var sec=startTime.getSeconds();
    var endTime=(min*60)+sec+countTime;
    stopCount=false;

    countDown();

    function countDown() {
        var today=new Date();
        var m=today.getMinutes();
        var s=today.getSeconds();
        var currTime=(m*60)+s;
        var remTime=endTime-currTime;
        var remMin = Math.floor(remTime/60);
        var remSec = remTime % 60;

        // add a zero in front of numbers<10
        remMin=leadZero(remMin);
        remSec=leadZero(remSec);

        document.getElementById('timer').innerHTML=remMin+":"+remSec;

        if (remTime > 0 && stopCount==false) { 
            t=setTimeout(function(){countDown()},500);
        }
        else if (stopCount==false){document.getElementById("nextButton").innerHTML = "Finished";}
        else {} 
    }   
}

根据要求，这里是按钮和调用函数的代码...

纽扣：

<button onclick="newSyllable()" id="nextButton" style="font:60px 'Nunito', sans-serif;">Start</button>

<button onclick="resetScore()"><span style="font:20px 'Nunito', sans-serif;">Reset</span></button>

职能：

function resetScore() {
    points=0
    stopCount=true;
    document.getElementById("score").innerHTML = "Score: " + points
    document.getElementById("nextButton").innerHTML = "Start"
    document.getElementById("syllable").innerHTML = " "
    t=setTimeout(function(){setCountDown()},500);
}

    function newSyllable() {
    if (document.getElementById("nextButton").innerHTML == "Finished"){
    }
    else {
        if (document.getElementById("nextButton").innerHTML == "Start"){
            newCount();
        }

        document.getElementById("nextButton").innerHTML = "Next"


        switch (currentUnit) {
        case "1":
            unit1();
            break;
        case "2":
            unit2();
            break;
        case "3":
            unit3();
            break;
        case "4":
            unit4();
            break;
        case "5":
            unit5();
            break;
        case "6":
            unit6();
            break;
        }
        document.getElementById("score").innerHTML = "Score: " + points++
    }
}

Answer 1

好的，所以我认为问题出在您使用两个Date对象计算剩余时间的方式。 一种更简单的方法是将countTime变量用作开始时间（以秒为单位），然后使用1000毫秒间隔执行倒计时。 请尝试以下代码：

var stopCount = false;
var countTime = 10;

function newCount() {
    if(stopCount === false) {
        var counter=setInterval(countDown, 1000);
    }
    stopCount = true;

    function countDown() {
        countTime = countTime - 1;
        var remMin = Math.floor(countTime/60);
        var remSec = countTime % 60;
        // add a zero in front of numbers<10
        remMin=leadZero(remMin);
        remSec=leadZero(remSec);
        document.getElementById('timer').innerHTML=remMin+":"+remSec;

        if (countTime <= 0)
        {
            clearInterval(counter);
            document.getElementById("nextButton").innerHTML = "Finished";
            return;
        }
    }   
}

JSFiddle： http : //jsfiddle.net/5vxbe/8/

Answer 2

我使用@JL的countTime = countTime-1思路进一步简化了代码，但使用了我原来的setTimeout递归函数，而不是setInterval和clearInterval。

我希望“重置”按钮能够在完成之前停止并重置计时器，并且此代码使操作更为简单（我认为）。

这是最终代码：

function newCount() {
    stopCount=false;
    countDown();
    function countDown() {
        if (stopCount==false) {
            countTime=countTime-1
            var remMin = Math.floor(countTime/60);
            var remSec = countTime % 60;

            // add a zero in front of numbers<10
            remMin=leadZero(remMin);
            remSec=leadZero(remSec);
            document.getElementById('timer').innerHTML=remMin+":"+remSec;
            if (countTime > 0) { 
                t=setTimeout(function(){countDown()},1000);
            }
            else {document.getElementById("nextButton").innerHTML = "Finished";}
        }

    }   
}