javascript - 在秒表上按 "stop"后如何停止时间运行

Question

我制作了这个秒表，它运行得很好。我遇到的唯一问题是，每当我点击“停止”按钮时，屏幕上的时间就会停止，但它仍在后台运行。

有什么办法可以阻止这种情况发生吗？我希望计时器在当前时间停止，然后当我单击“开始”时，它会从停止的时间恢复。

我想也许在更新函数之前创建一个“new Date()”变量，在更新函数内部创建另一个“new Date()”变量，然后以某种方式减去它们以获得当前日期。但我也想不通。

start = document.getElementById('Start');
        stop = document.getElementById('Stop');
        let watchRunning = false;

        Start.addEventListener('click', startHandler);
        Stop.addEventListener('click', stopHandler);

        function startHandler() {
            if (!watchRunning) {
                watchRunning = setInterval(update, 70);
            }
        }
        function stopHandler() {
            clearInterval(watchRunning);
            watchRunning = null;
        }

        update();
        var seconds;
        var milliseconds;
        var d;

        function update() {
            d = new Date();
            seconds = d.getSeconds();
            milliseconds = Math.floor((d.getMilliseconds() / 10));

            if (milliseconds < 10 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ".0" + milliseconds;

            } else if (milliseconds < 10 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ".0" + milliseconds;

            } else if (milliseconds >= 0 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + "." + milliseconds;

            } else if (milliseconds >= 0 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + "." + milliseconds;
            }
        }

#Time {
            background-color: yellow;
            max-width: 2.3%;
        }

<h1>Stop Watch</h1>
    <button id="Start">Start</button>
    <button id="Stop">Stop</button>
    <h3>Elapsed Time:</h3>
    <p id="Time"></p>

尝试运行代码片段，您就会明白我的意思。单击停止后时间不会停止“运行”，当我单击开始时它会继续运行，就好像它从未停止过一样。

Answer 1

clearTimeout( return ID of setTimeout() );

clearTime 变量作为一个值由 setTimeout( ) 计时方法返回，它可以作为一个 ID 传递给 clearTimeout( ID ) 以引用它 - clearTimeout( clearTime );

它是如何工作的

每当在激活的 setTimeout( ) 计时方法上调用 clearTimeout( ) 计时方法时，clearTimeout( ) 计时方法将停止 setTimeout( ) 计时方法的执行，但不会完全破坏其执行。

调用clearTimeout()计时方法期间，setTimeout()计时方法处于空闲状态，当您重新执行setTimeout()计时方法时，将从停止执行的点开始，而不是一切从头开始。

一切顺利!