单击重置设置间隔

Onclick reset setInterval

本文关键字：设置 单击      更新时间：2023-09-26
<!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>

我想在单击时重置计时器。 例如，如果 setIntervaltime 设置为 5 秒并且经过 3 秒，之后如果有人点击重置按钮，它应该从 5 秒开始增益。如何做到这一点。

  1. 将 setTimeout 的返回值保留在可以再次获取它的地方(当前您将其存储在局部变量中，因此当函数结束时它会消失(
  2. 呼叫clearTimeout(timer);
  3. 再次用你想要的任何参数调用setTimeout。

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

相关文章：