Question

作为一名java脚本初学者，我想尝试编写秒表代码并编写以下内容：

<!DOCTYPE html>
<html>
<body>
    <p>A script on this page starts a stopwatch:</p>
    <p id="demo"></p>

    <button id="start-stop" onclick="myTimerFunction()">Start time</button>
    <button id="resetter" style="visibility:hidden" onclick="resetTimer()">Reset</button>

    <script>
        var timer = new Object();
        timer.hours = 0;
        timer.minutes = 0;
        timer.seconds = 0;
        timer.milliseconds = 0;
        timer.add = add;
        function add() {
            timer.milliseconds+=10;
            if(timer.milliseconds == 1000) {
                timer.seconds++;
                timer.milliseconds = 0;
            }
            if(timer.seconds == 60) {
                timer.minutes++;
                timer.seconds = 0;
            }
            if(timer.minutes == 60) {
                timer.hours++;
                timer.minutes = 0;
            }
        }
        timer.display = display;
        function display () {
            var str = "";
            if(timer.hours<10) {
                str += "0";
            }
            str += timer.hours;
            str += ":";
            if(timer.minutes<10) {
                str += "0";
            }
            str += timer.minutes;
            str += ":";
            if(timer.seconds<10) {
                str += "0";
            }
            str += timer.seconds;
            str += ":";
            /*var x = timer.milliseconds/10;
            if(x < 10) {
                str += "0";
            }*/
            if(timer.milliseconds<10) {
                str += "0";
            }
            if(timer.milliseconds<100) {
                str += "0";
            }
            str += timer.milliseconds;
            return str;
        }
        timer.reset = reset;
        function reset() {
            timer.hours = 0;
            timer.minutes = 0;
            timer.seconds = 0;
            timer.milliseconds = 0;
        }

        var myVar;
        function start() {
            timer.add();
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = timer.display() + "\t" + t;
        }

        function stop() {
            clearInterval(myVar);
        }

        function resetTimer() {
            stop();
            timer.reset();
            document.getElementById("demo").innerHTML = timer.display();
            document.getElementById("start-stop").innerHTML="Start time";
            document.getElementById("resetter").style.visibility="hidden";
        }

        function myTimerFunction() {
            var x = document.getElementById("start-stop");
            if(x.innerHTML.match("Start time")) {
                document.getElementById("resetter").style.visibility="visible";
                myVar = setInterval(function(){start()},10);
                x.innerHTML="Stop time";
            }
            else if(x.innerHTML.match("Stop time")) {
                stop();
                x.innerHTML="Start time";
            }
        }
    </script>
</body>
</html>

但问题是当我将延迟放在 setInterval（func，delay） 中时 1 并做相应的更改，它没有给出可靠的秒数时间。它比普通时钟慢。它为延迟＆gt; = 10 提供了“一种”可靠的时间。

我检查了在线观看js脚本，但他们都使用了一些或其他形式的Date（）并将“delay”设置为“50”，我不明白为什么，截至目前。这里有一个答案，它不使用Date（）但它也有与我相同的问题。我无法在那里评论，因为我没有足够的声誉，所以我提出了一个问题。

所以，我的问题是：如果我们不使用Date（）函数，是否无法实现正常的时钟可靠性？如果有可能，请帮助我改进这段代码或者请提供一些指示。

感谢。

Answer 1

在没有getTime的情况下你是如何做到的，你真的不应该......

var ms = 0;
var intervalID;

function start() {
    var freq = 10; // ms
    intervalID = setInterval(function () {
        ms += 10;
        var myDate = new Date(ms);
        document.getElementById('watch').innerHTML = myDate.getUTCHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds() +
            ":" + myDate.getMilliseconds();
    }, freq);
}

function stop() {
    clearInterval(intervalID);
}

function reset() {
    ms = 0;
    myDate = new Date(ms);
    document.getElementById('watch').innerHTML = myDate.getUTCHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds() +
        ":" + myDate.getMilliseconds();
}

<强> Fiddle

Answer 2

你发现setInterval/setTimeout不可靠。您必须使用本机时间库才能获得可靠的时间。

由于您无法在JavaScript中保留时间，因此您需要轮询时间，并经常轮询它以使其看起来足够接近。

如果你天真地做：

setInterval(function () {
    console.log((new Date()).getTime();
}, 1000); // 1 second

你会看到它会跳过几秒钟。

更好的方法是：

var last = 0;
setInterval(function () {
    var now = Math.floor((new Date()).getTime() / 1000); // now in seconds
    if (now !== last) {
        console.log(now);
        last = now;
    }
}, 10); // 10ms

Answer 3

如果您想了解更多信息，为什么JavaScript定时器不可靠，请阅读这篇精彩的文章。

http://ejohn.org/blog/how-javascript-timers-work/

在不使用Date.getTime（）的情况下秒表javascript

3 个答案: