Question

我一直在使用Javascript制作秒表，并且我已成功实现了所有功能。但是，由于计时器每隔10毫秒更新一次，因此chrome dev控制台会显示网页有时在秒表字段中没有任何内容，导致字段突然闪烁，因为时间再次出现。

我想知道如何拥有一个无眨眼的静态秒表。

主持人：http://folk.ntnu.no/nikolahe/assignment8/stopwatch.html

stopwatch.js

window.addEventListener("load", function(e){

    var interval;
    var state = 0;
    var display = document.getElementById('display-area');
    var offset;
    var clock = 0;

    function updateTimer() {
        clock += delta();
        var time = format(clock);
        if (time != "") {
            display.value = time;
        }
    }

    function format(clock) {
        var timer = new Date(clock);
        var currentHours = timer.getHours()-1;
        var currentMinutes = timer.getMinutes();
        var currentSeconds = timer.getSeconds();
        var currentMilliseconds = timer.getMilliseconds();

        currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
        currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
        currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
        currentMilliseconds = ( currentMilliseconds < 100 ? "0" : "" ) + currentMilliseconds;
        return currentHours + ":" + currentMinutes + ":" + currentSeconds + "." + currentMilliseconds;
    }

    function delta() {
        var now = Date.now();
        d = now - offset;
        offset = now;
        return d;
    }

    function toggle() {
        console.log(state);
        if (!interval) {
            console.log("start");
            offset = Date.now();
            interval = setInterval(updateTimer, 10);
        } else {
            console.log("stop");
            clearInterval(interval);
            interval = null;
        }
    }

    function reset() {
        if(interval) {
            toggle();
        }
        display.value = "00:00:00.000"
        clock = 0;
    }

    document.getElementById('toggle-button').addEventListener("click", toggle);
    document.getElementById('reset-button').addEventListener("click", reset);
})

stopwatch.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Stopwatch</title>
        <script src="stopwatch.js"></script>
        <style>
            body { text-align: center; margin-top: 200px; font-family: courier;}
            #display-area { font-size: 20pt; }
        </style>
    </head>
    <body>
        <div>
            <output id="display-area">00:00:00.000</output>
        </div>
        <div>
            <button id="toggle-button">Start / Stop</button>
            <button id="reset-button">Reset</button>
        </div>
    </body>
</html>

Answer 1

这是在使用最新的Chrome而没有任何闪烁，因此我无法重新创建它并且无法判断此解决方案是否正确，但它可能是一种解决方案。

这可能是浏览器本身造成的问题。人眼每16ms只能看到明显的变化，你的循环肯定会在比这更短的时间内运行。问题可能只是浏览器不希望您在16ms之前更新元素的内容。如果你说它大约每10毫秒运行一次，你将每4个整个周期（16毫秒），其中不会显示该值。这只是一个理论，我无法证明这一点。

而不是interval = setInterval(updateTimer, 10);，请尝试interval-= 16; window.setTimeout(updateTimer, 16)，这应该每16毫秒或更长时间执行一次

经常更新值时闪烁

1 个答案: