javascript - 使用范围输入动态更改 setInveral/Timeout 速度

Question

我想知道是否可以使用 html5 范围输入动态更改 setInterval 或 setTimeout 速度？如果是这样我该怎么做？我尝试将输入值保存到变量，然后将变量设置为间隔/超时时间，但它不起作用，并且间隔/超时在更改时全速工作。有人可以给我一些例子吗？ :)

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = elem.value;
  var b = newValue;
  delay = b;
  setInterval(function(){ 
  console.log("Hi")
  }, delay);
  

}

elem.addEventListener("input", rangeValue);

<input name="1" type="range" min="1000" max="7000" step="10" value="0">

Answer 1

当范围输入滑动时，输入事件将触发多次，因此当您认为只设置 1 个间隔/超时时，您实际上是在设置多个。这给人的印象是你的计时器正在全速运行(我假设你的意思是它被设置为 0 延迟)。

您可以采取什么措施来对抗保存从 setTimeout/Interval 返回的计时器 ID 的行为。然后在回调开始时立即清除它，以确保以前的任何计时器不再运行。

var elem = document.querySelector('input[type="range"]');

var timerId = null;

var rangeValue = function(){
  clearInterval(timerId);
  var delay = elem.value;
  timerId = setInterval(function(){ 
    console.log("Hi")
  }, delay);
}

elem.addEventListener("input", rangeValue);

<input name="1" type="range" min="1000" max="7000" step="10" value="0">