setInterval 不使用变量更新答案

【问题标题】：setInterval not updating with variablesetInterval 不使用变量更新
【发布时间】：2020-07-04 13:26:55
【问题描述】：

当我运行代码时，它只在我创建的初始变量“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 在点击事件之前立即触发，因此amount 停留在2000。如果你想要一个间隔来改变时间，它不会。您可以将间隔分配给一个变量和clearInterval(interval)，然后创建一个新的。

标签： javascript html variables setinterval var

【解决方案1】：

您应该将 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 处理程序并重新创建它。

【讨论】：

【解决方案2】：

时间间隔已经用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);
}

【讨论】：