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">

Answer 2

您需要添加两个不同的东西。首先，您需要存储当前间隔，以便在设置新间隔时清除它。此外，您应该在更改滑块时添加超时，这样您就不会在路径上的每个值处设置间隔。

var elem = document.querySelector('input[type="range"]');
var slideInput;
var currentInterval;

var rangeValue = function(){
  if (currentInterval) {
    clearInterval(currentInterval);
  }
  var newValue = elem.value;
  var b = newValue;
  delay = b;
  currentInterval = setInterval(function(){ 
  console.log("Hi")
  }, delay);
  

}

elem.addEventListener("input", function()
{
  if (slideInput) {
    clearTimeout(slideInput);
  }
  
  slideInput = setTimeout(rangeValue, 250);
});

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

使用范围输入

2 个答案: