set和clearInterval

Question

我有两个函数，increaseSpeed和decreaseSpeed。 他们都使用clearInterval（）然后使用setInterval，但是有些事情是对的。

decreaseSpeed将我的速度从1000减慢到5000然而如果我使用该功能10-20倍，速度似乎更像100-500ms。 此外，如果我使用increaseSpeed将速度提高到50ms并使用了之后的减速速度，则reduceSpeed根本不会产生任何影响。

这是设置，清除功能

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

和decreaseSpeed

    function decreaseSpeed(){

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

        console.log(updateRate)
};

我设置JSFiddle，如果你点击＆＃34;降低速度＆＃34;按钮几次，你会理解我的意思。

Answer 1

您忘了在函数中为id分配setInterval（decreaseSpeed和increaseSpeed）。

id = setInterval(myFunction, updateRate);  

JSFiddle

Answer 2

我看了你的小提琴，我想我发现了问题。

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

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

Answer 3

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

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

更改

setInterval(myFunction, updateRate);

到

id = setInterval(myFunction, updateRate);

应该修复它。