Question

clearInterval函数仅在我的代码中停止计时器，而不是实际时间。单击stop按钮后，计时器停止，但似乎它仍然在后台运行。当我再次重新单击start按钮时，它不会从停止的位置恢复，而是显示在后台运行的实际时间。请参阅代码中的操作。

我再次点击stop按钮点击start按钮后，如何真正停止计时器并恢复计时器？

var timeBegan = new Date();

function start(){    
    started = window.setInterval(clockRunning, 10);	

}

function stop(){
    window.clearInterval(started);
 }





function clockRunning(){
	currentTime = new Date()
        , timeElapsed = new Date(currentTime - timeBegan)
        , hour = timeElapsed.getUTCHours()
        , min = timeElapsed.getUTCMinutes()
        , sec = timeElapsed.getUTCSeconds()
        , ms = timeElapsed.getUTCMilliseconds();

    document.getElementById("display-area").innerHTML = 
        (hour > 9 ? hour : "0" + hour) + ":" + 
        (min > 9 ? min : "0" + min) + ":" + 
        (sec > 9 ? sec : "0" + sec) + "." + 
        (ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms);
};

function reset(){
	window.clearInterval(started);
	running = 0;
	hour = min = sec = ms = 0;
	document.getElementById("display-area").innerHTML = "00:00:00.000";
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Stopwatch</title>
        <script src="stopwatch.js"></script>
        <style>
            #display-area { font-size: 20pt; }
        </style>

    </head>
    <body>
        <div>
            <output id="display-area">00:00:00.000</output>
        </div>
        <div>
            <button id="start-button" onClick="start()">Start</button>
            <button id="stop-button" onclick="stop()">Stop</button>
            <button id="reset-button" onclick="reset()">Reset</button>

        </div>
    </body>
</html>

Answer 1

这是因为您永远不会重置timeBegan。您将继续使用相同的值作为开始时间。

您需要将此值设置为start()内的当前时间，否则您只是使用加载页面的时间作为参考时间，而不是上次调用start()的时间。

var timeBegan;

function start() {
    timeBegan = new Date();
    started = window.setInterval(clockRunning, 10);
}

或者，你可以在reset()内执行此操作，然后停止点击然后开始点击将更像是一个计时器;你可以冻结时间，但在后台它会一直计数，直到你点击重置按钮。

如果您希望停止按钮暂停计时器，那么在您单击停止时，您需要在某处记录当前持续时间。然后在clockRunning()函数中，您可以将此持续时间添加到您的时间减法计算产生的任何时间。（当然，reset()应该清除这个存储的持续时间。）

Answer 2

您想要的是timeElapsed 和计数器，而不是timeElapsed的当前实现，而对于clockRunning的每次调用，您都需要将上次clockRunning来电中的时差添加到timeElapsed。

start应该开始/恢复clockRunning函数调用
clockRunning应该将timeElapsed与上一次clockRunning来电时间差增加stop
clockRunning应停止clockRunning次来电，并将null来电时间设为-1或start。
在clockRunning中，如果上一次调用null是-1或clockRunning（基本上，如果调用了停止），请设置上次{{1} }被称为现在。

在clearInterval（）之后恢复计时器

2 个答案: