set and clearInterval

Question

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

递减速度将我的速度从1000减慢到5000，但如果我使用10-20倍以上的功能，速度似乎更像100-500ms。此外，如果我使用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，如果你点击"降低速度"按钮几次，你就会明白我的意思。

Answer 1

您忘记将setInterval分配给函数中的id（递减速度和递增速度）。

id = setInterval(myFunction, updateRate);  

JSFiddle

Answer 2

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

使用increaseSpeed和decreaseSpeed函数时，需要将间隔的id设置为新的间隔。这将确保下次单击"提高或降低速度"按钮时，上一个间隔将被清除。

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

Answer 3

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

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

更改

setInterval(myFunction, updateRate);

至

id = setInterval(myFunction, updateRate);

应该修复它。