set与clearInterval

Question

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

decreaseSpeed将我的速度从1000减慢到5000，但是如果我使用这个函数10-20倍，速度似乎更像是100-500毫秒。另外，如果我使用increaseSpeed将速度提高到50 at，然后使用decreaseSpeed，那么decreaseSpeed根本不会产生任何影响。

这是一套清晰的功能

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，如果你几次点击“减速”按钮，你就会明白我的意思了。

Answer 1

您忘记在函数中将setInterval分配给id (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);

应该把它修好。