替换 JS 中的 setInterval 计时器答案

【问题标题】：Replacing a setInterval timer in JS替换 JS 中的 setInterval 计时器
【发布时间】：2016-05-16 18:29:36
【问题描述】：

我有一个具有特定速度的动画，它的值是从输入范围传递的。页面加载时动画默认速度为 16，如下所示。

HTML：

 <input type="range" min="1" max="30"   /><br>

JS：

  animateInterval = setInterval(animate, 16);
    $("input").change(function(){
    var value = $(this).val();
   animateInterval = setInterval(animate,  value);
    })

每当我通过输入范围滑块选择一个新速度时，我希望动画速度运行的变量数字并没有取代默认速度，它实际上是增加了默认速度。因此，当页面加载并在 16 处运行时，我决定将滑块拖动到 10，动画不会在 10 处运行，而是在 26 处运行！这不允许我放慢动画速度，也不允许我决定自己的最大速度，因为它可以不断增加。

我需要如何调整上述代码，以使速度保持在所选择的任何值上，尽管在加载页面时需要具有默认速度？

【问题讨论】：

在将另一个setInterval 调用的结果分配给您的变量之前，在animateInterval 的第一个值上使用clearInterval。
您可能需要取消 (clearInterval(animateInterval))，然后使用新的延迟重置您的时间间隔。
总是让我印象深刻，几乎相同的答案可以在几秒钟之内给出； )
如果你想调节动画的速度，那么你的方法可能不正确。数字 16 不设置动画速度，但设置刷新率。你的动画（你没有提供的代码）应该取决于时间，并且有合适的地方来控制动画的速度。

标签： javascript jquery animation

【解决方案1】：

在设置新间隔之前清除之前的间隔：

clearInterval(animateInterval);

你现在正在做的是每次设置另一个间隔，并且全部并行触发。

【讨论】：

我喜欢用一行代码就能给出答案。它就像一个魅力。谢谢。