Onclick重置setInterval

Question

<!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秒开始增益。如何执行此操作。

Answer 1

将setTimeout的返回值保留在可以再次获取的位置（当前您将其存储在局部变量中，因此在函数结束时它会消失）
调用clearTimeout(timer);
再次使用您想要的任何参数调用setTimeout 。

Answer 2

正如昆汀已经提到的那样，使用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

Onclick重置setInterval

问题描述

2 个解决方案

解决方案1
6 已采纳 2013-08-16 06:29:25

解决方案2
1 2013-08-16 06:56:04

Onclick重置setInterval

问题描述

2 个解决方案

解决方案1 6 已采纳 2013-08-16 06:29:25

解决方案2 1 2013-08-16 06:56:04

解决方案1
6 已采纳 2013-08-16 06:29:25

解决方案2
1 2013-08-16 06:56:04