无法获得 javascript 为输入类型=范围完善的代码以影响 setInterval 时间

Question

我是个新手，发现自己一直在苦苦思索我在 setInterval (function, t) 中创建调整 'time' 的效果失败的地方。 setInterval 独立运行时效果很好，可以手动调整时间，但我想附加一个范围滑块来动态调整时间。

我的代码是：

var ctx, v, c;

var text='All Male';

var speed = 500;




var angle = 0;


window.onload = init;


function init (){
  
  
  c = document.querySelector('#c');
  
  ctx=c.getContext('2d');
  
  drawShapes();
  drawRotatingText();
  
  
  
  
   setInterval("drawRotatingText()",speed);
   
   
   // Here is what what does not work
   
   speedV = document.querySelector('#speedV'); 
 
document.getElementById('speed').addEventListener('change', changeSpeed);

}

function changeSpeed(event) {

 
  
speed = parseInt(event.this.value);}

 <input id="speed" min="125" max="500" value="500" step="any" oninput="changeSpeed(event);" type="range"><output id="speedV"></output>
    <label for="speed">Text Speed</label> 
 
    <canvas id="c" class="canv" width="600" height="400">Your browerse does not support the canvas tag</canvas>

感谢您的帮助！！

Answer 1

问题是将 setInterval() 函数的 milliseconds 参数设为变量是没有意义的，因为它只会在您的代码中被调用一次作为 init() 函数的一部分。稍后将 speed 变量更改为其他内容不会以任何方式更改间隔。

除此之外，我猜您可能认为速度变量以某种方式与间隔相关联，但事实并非如此。一旦 setInterval(drawRotatingText, speed); 被执行，速度的实际值（在执行时）就会被传递——而不是变量本身。

现在我必须说整个事情在概念上并不是最好的，但如果我们想走那条路，一个简单的解决办法是用 setTimeout 替换 setInterval。与 setInterval 不同，它的回调函数只会被调用一次但是您可以在回调处理程序中重新触发它并使用由范围滑块确定的当前速度值。

这是一个大致基于您的代码的示例（只需点击 'Run code snippet'）：

var ctx, v, c;
var text = 'All Male';
var speed = 500;
var interval;
var xPos = 0;

function drawText() {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.fillText(text, xPos, 55);
  if (xPos + 1 > c.width) {
    xPos = 0;
  } else {
    xPos++;
  }

  interval = setTimeout(drawText, speed);
}

function init() {
  c = document.querySelector('#c');
  ctx = c.getContext('2d');
  ctx.font = "30px Verdana";

  document.getElementById('speed').addEventListener('input', changeSpeed);
  interval = setTimeout(drawText, speed);
}

function changeSpeed(event) {
  speed = parseInt(event.target.value);
}

window.onload = init;

<canvas id="c" class="canv" width="300" height="100" style="background-color:grey;">Your browerse does not support the canvas tag</canvas><br>
<input id="speed" min="25" max="500" value="500" step="any" type="range">
<label for="speed">Text Speed</label>

无法获得 javascript 为输入类型=范围完善的代码以影响 setInterval 时间

unable to get javascript code perfected for an input type=range to effect setInterval time

javascript

label

input

html5-canvas