设置和清除间隔答案

【问题标题】：set and clearInterval设置和清除间隔
【发布时间】：2016-04-10 05:10:05
【问题描述】：

我有两个函数，增加速度和减少速度。他们都使用 clearInterval() 然后 setInterval 但是有些不对劲。

decreaseSpeed 将我的速度从 1000 降低到 5000，但是如果我使用该功能 10-20 倍，速度似乎更像是 100-500 毫秒。另外，如果我使用 increaseSpeed 将速度提高到 50ms 并在之后使用 reductionSpeed，那么 reductionSpeed 根本不会有任何效果。

这是设置，清除功能

var updateRate = 1000;
var id = setInterval(myFunction, updateRate);
function myFunction() {     
valClickedFun(1);
   }

并降低速度

    function decreaseSpeed(){

        clearInterval(id);
        updateRate = 5000;
        setInterval(myFunction, updateRate);

        console.log(updateRate)
};

我设置了JSFiddle，如果你多次点击“减速”按钮，你就会明白我的意思。

【问题讨论】：

您不会注意到 50 毫秒的增加/减少吗？
不，这就是为什么我将“IncreaseSpeed”设置为 50ms，（它并没有真正增加，只是将其设置为 50ms）和“decreaseSpeed 将其设置为 5000ms。通过将其设置为 5000ms 以上和再看一遍，你可以看到时间更像是500ms或更短，好像函数自己复制了它......我不知道如何解释：P

标签： javascript setinterval clearinterval

【解决方案1】：

您忘记在函数中将 setInterval 分配给 id（decreaseSpeed 和 increaseSpeed）。

id = setInterval(myFunction, updateRate);

JSFiddle

【讨论】：

【解决方案2】：

我看了你的小提琴，我想我找到了问题。

当您使用increaseSpeed 和decreaseSpeed 函数时，您需要将区间的id 设置为新区间。这将确保您下次单击“增加或减少速度”按钮时，之前的间隔将被清除。

例如：id = setInterval(myFunction, updateRate);

【讨论】：

【解决方案3】：

对setInterval 的每次调用都会返回一个唯一值。当您最初调用setInterval 时将其存储在id 中，但在创建新间隔时您不会在decreaseSpeed 或increaseSpeed 中重置它。

因此，每个clearInterval(id) 调用都会尝试清除原始间隔，即使它已被清除。随后创建的任何间隔都将继续运行。 increaseSpeed 和 decreaseSpeed 不是用更快或更慢的间隔替换现有间隔，而是添加一个与现有间隔一起运行的新间隔。

变化

setInterval(myFunction, updateRate);

到

id = setInterval(myFunction, updateRate);

应该修复它。

【讨论】：