设置和清除间隔

Question

我得到了两个函数，increaseSpeed 和 decreaseSpeed。他们都使用 clearInterval() 然后使用 setInterval 但是有些地方不对。

decreaseSpeed 将我的速度从 1000 减慢到 5000，但是如果我使用该功能 10-20 倍以上，速度似乎更像是 100-500 毫秒。另外，如果我使用 increaseSpeed 将速度提高到 50ms，然后再使用 decreaseSpeed，decreaseSpeed 根本不会有任何效果。

这是设置、清除函数

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，如果你点击"Decrease speed"按钮几次，你就会明白我的意思。

Answer 1

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

id = setInterval(myFunction, updateRate);

JSFiddle

Answer 2

我查看了您的 fiddle，我想我找到了问题所在。

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

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

Answer 3

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

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

改变

setInterval(myFunction, updateRate);

到

id = setInterval(myFunction, updateRate);

应该修复它。

设置和清除间隔

set and clearInterval

javascript

setinterval

clearinterval