如何使用用户输入更改 setInterval 中的时间？

Question

我想知道一种更改 setInterval 时间的方法，以便我的图像以该速度在屏幕上移动。例如，如果我输入 500 毫秒，它会在我单击按钮时将时间间隔从 250 更改为 500。这是我到目前为止想到的。 var x; var y; var timing = 1000; function window_onLoad() {     x = 0;     y = 100;     window.setInterval("MoveBall()", timing);     picBall.style.top = y + "px"; }  function MoveBall() {     x = x + 5;     if (x < document.body.clientWidth - 91) {        picBall.style.left = x + "px";    }}function btnReset_OnClick() {    x = 0;}function btnSpeed_OnClick() {    timing = parseInt(txtSpeed.value);}window_onLoad()<img id="picBall" src="Face.jpg" style="position: absolute;"/><input id="btnReset" type="button" value="Reset position"       onclick="btnReset_OnClick()"/><input id="txtSpeed" type="text"/><input id="btnSpeed" type="button" value="Change Speed"   oclick="btnSpeed_onClick()"/>

Answer 1

我建议不要将移动速度与帧率（您的 setInterval 速度）混合。您可以拥有固定的帧率和可变的速度。例如

var speed = 1, timer, x,y;

 function window_onLoad() {

     x = 0;

     y = 100;

     window.setInterval("MoveBall()", 100); // 10 frames per second

     picBall.style.top = y + "px";

 } 

 function MoveBall() {

     x = x + speed;

     if (x < document.body.clientWidth - 91) {

        picBall.style.left = x + "px";

    }

}

function btnReset_OnClick() {

    x = 0;

}

function btnSpeed_OnClick() {

    /*

       speed = 200 will move tbe ball by 20px per sec

       speed = 100 will move the ball by 10px per sec

       speed = 50 will move the ball by 5px per sec

     */

    speed = parseInt(txtSpeed.value)/100;

}

Answer 2

您的主要问题是您需要清除先前的间隔并创建一个新的间隔。但是，我建议将创建间隔的代码移动到另一个像这样的函数中......

function window_onLoad() {

  x = 0;

  y = 100;

  createInterval(timing);

  picBall.style.top = y + "px";

} 

var intervalId = 0;

// this will destroy any existing interval and create a new one

function createInterval(interval) {

  clearInterval(intervalId);

  intervalId = setInterval(MoveBall, interval);

}

function btnSpeed_OnClick() {

  timing = parseInt(txtSpeed.value);

  createInterval(timing);

}

Answer 3

您必须保存对间隔的引用，然后，每次要更改速度时，您都必须清除前一个间隔，clearInterval然后应用新的间隔，如下所示：

 var x;

 var y;

 var timing = 1000;

 var interval;

 function window_onLoad() {

     x = 0;

     y = 100;

     applyInterval();

     picBall.style.top = y + "px";

 } 

function applyInterval() {

  if (interval) {

    console.log('Clearing previous interval');

    clearInterval(interval);

  }

  console.log('Applying new interval');

  interval = window.setInterval("MoveBall()", timing);

}

function MoveBall() {

     x = x + 5;

     if (x < document.body.clientWidth - 91) {

        picBall.style.left = x + "px";

    }

}

function btnReset_OnClick() {

    x = 0;

}

function btnSpeed_OnClick() {

    timing = parseInt(txtSpeed.value);

    applyInterval();

}

window_onLoad()

<img id="picBall" src="https://i.stack.imgur.com/vnucx.png?s=64&g=1" style="position: absolute;" width="25" height="25"/>

<input id="btnReset" type="button" value="Reset position"

       onclick="btnReset_OnClick()"/>

<input id="txtSpeed" type="text"/>

<input id="btnSpeed" type="button" value="Change Speed"

   onclick="btnSpeed_OnClick()"/>