1 
<!DOCTYPE html>
<html>
<head>
<script>

function timer(x) {
    if (x == 1) {
        //reset timer 
        }
    var i = 0;
    var timer = setInterval(function() {

        var x = document.getElementById("demo").innerHTML = i;
        i = i + 1;

    }, 500);
}

</script>
</head>
<body>


<p id="demo">hello</p>

<button type="button" onclick="timer(0)">change</button>

<button type="button" onclick="timer(1)">reset</button>

</body>
</html>

我想重置计时器 onclick 。例如，如果 setIntervaltime 设置为 5 秒并且经过了 3 秒，之后如果单击重置按钮，它应该从 5 秒开始增益。如何执行此操作。

4

2 回答 2

7
  1. 将返回值保留在setTimeout可以再次获取的位置（当前您将其存储在局部变量中，因此当函数结束时它会消失）
  2. 称呼clearTimeout(timer);
  3. 再次调用setTimeout您想要的任何参数。
于 2013-08-16T06:29:25.987 回答
3

正如昆汀已经提到的，clearInterval用来解决你的问题。

将它包装在一个if.else..语句中，如

if(x == 1) {
   clearTimeout(timeout);
}
else {
    timeout = setInterval.....  // otherwise even after resetting
                                // it will continue to increment the value
}

完整代码： 

var timeout;  // has to be a global variable
function timer(x) {
    var i = 0;
    if (x == 1) {
        clearTimeout(timeout);
        document.getElementById("demo").innerHTML = i;
    } else {
        timeout = setInterval(function () {
            var x = document.getElementById("demo").innerHTML = i;
            i = i + 1;
        }, 1000);
    }
}

JSFiddle

于 2013-08-16T06:56:04.923 回答