[当我运行代码时，它仅在我创建的“ 2000”初始变量处间隔。当我单击按钮时，间隔不会更改为“ 50”。有人知道为什么吗？
<html>
<body>
<h1 id="pressme"> Press me! </h1>
</body>
<script>
amount = 2000;
var i = 1;
document.getElementById("pressme").onclick = function() {
amount = 50;
}
function doSomething() {
i++;
console.log("I did something! " + i);
}
setInterval(doSomething, amount)
</script>
</html>
这不是OG代码，而是它的简化版本。
您应该将setInterval与clearInterval一起使用。
<html>
<body>
<h1 id="pressme"> Press me! </h1>
</body>
<script>
amount = 2000;
var i = 1;
var handler
document.getElementById("pressme").onclick = function() {
amount = 50;
clearInterval(handler);
handler = setInterval(doSomething, amount);
}
function doSomething() {
i++;
console.log("I did something! " + i);
}
handler = setInterval(doSomething, amount);
</script>
因此，单击按钮时，应删除原始的setInterval处理程序并重新创建它。
间隔已经设置为2s，如果在此之后更改变量，则不会有任何区别。
我建议您这样做：
let amount = 2000;
let interval = setInterval(doSomething, amount);
var i = 1;
document.getElementById("pressme").onclick = function () {
clearInterval(interval);
amount = 50;
setInterval(doSomething, amount);
}
function doSomething() {
i++;
console.log("I did something! " + i);
}
您需要主动管理使用setInterval()定期运行的代码；您可以通过捕获setInterval()的输出并在更改间隔时间本身之前清除它来完成此操作。
一种方法是用模块模式封装它，如下所示：
const repeater = function(fn, interval) {
let intervalId = setInterval(fn, interval)
// return the public interface here
return {
setInterval: function(interval) {
clearInterval(intervalId) // clear existing timer first
intervalId = setInterval(fn, interval)
}
}
}(doSomething, 2000) // initialise with default values
document.getElementById("pressme").onclick = function() {
repeater.setInterval(5000) // call public interface
}
var i = 1;
function doSomething()
{
i++;
console.log("I did something! " + i);
}<html>
<body>
<h1 id="pressme"> Press me! </h1>
</body>
</html>