设置并清除Interval

Question

我有两个函数，递增速度和递减速度。它们都使用clearInterval（）然后使用setInterval，但是有些地方不正确。

降低速度将我的速度从1000降到5000，但是如果我使用该功能，速度将增加10-20倍，看起来更像是100-500毫秒。另外，如果我使用increaseSpeed将速度提高到50毫秒，然后使用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)
};

我已经设置了一个JSFIDLE，如果您多次单击“降低速度”按钮，您就会理解我的意思。

Answer 1

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

因此，每个clearInterval（id）调用都会尝试清除原始间隔，即使它已经被清除。任何随后创建的间隔都保持运行状态。不要用更快或更慢的间隔替换现有间隔，increaseSpeed和decreseSpeed添加一个与现有间隔并行运行的新间隔。

变化中

setInterval(myFunction, updateRate);

到

id = setInterval(myFunction, updateRate);

你应该把它修好。

Answer 2

我看了一下你的小提琴，我想我发现了问题所在。

使用递增速度和递减速度功能时，需要将间隔id设置为新间隔。这将确保下次单击增加或减少速度按钮时，前一间隔将被清除。

例如：id=setInterval（myFunction， update速率）；

Answer 3

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

id = setInterval(myFunction, updateRate);  

JSFIDLE