如何使用用户输入更改 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;&nbsp;function window_onLoad() {&nbsp; &nbsp; &nbsp;x = 0;&nbsp; &nbsp; &nbsp;y = 100;&nbsp; &nbsp; &nbsp;window.setInterval("MoveBall()", 100); // 10 frames per second&nbsp; &nbsp; &nbsp;picBall.style.top = y + "px";&nbsp;}&nbsp;&nbsp;function MoveBall() {&nbsp; &nbsp; &nbsp;x = x + speed;&nbsp; &nbsp; &nbsp;if (x < document.body.clientWidth - 91) {&nbsp; &nbsp; &nbsp; &nbsp; picBall.style.left = x + "px";&nbsp; &nbsp; }}function btnReset_OnClick() {&nbsp; &nbsp; x = 0;}function btnSpeed_OnClick() {&nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp;speed = 200 will move tbe ball by 20px per sec&nbsp; &nbsp; &nbsp; &nbsp;speed = 100 will move the ball by 10px per sec&nbsp; &nbsp; &nbsp; &nbsp;speed = 50 will move the ball by 5px per sec&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; speed = parseInt(txtSpeed.value)/100;}

Answer 2

您的主要问题是您需要清除先前的间隔并创建一个新的间隔。但是，我建议将创建间隔的代码移动到另一个像这样的函数中......function window_onLoad() {&nbsp; x = 0;&nbsp; y = 100;&nbsp; createInterval(timing);&nbsp; picBall.style.top = y + "px";}&nbsp;var intervalId = 0;// this will destroy any existing interval and create a new onefunction createInterval(interval) {&nbsp; clearInterval(intervalId);&nbsp; intervalId = setInterval(MoveBall, interval);}function btnSpeed_OnClick() {&nbsp; timing = parseInt(txtSpeed.value);&nbsp; createInterval(timing);}

Answer 3

您必须保存对间隔的引用，然后，每次要更改速度时，您都必须清除前一个间隔，clearInterval然后应用新的间隔，如下所示：&nbsp;var x;&nbsp;var y;&nbsp;var timing = 1000;&nbsp;var interval;&nbsp;function window_onLoad() {&nbsp; &nbsp; &nbsp;x = 0;&nbsp; &nbsp; &nbsp;y = 100;&nbsp; &nbsp; &nbsp;applyInterval();&nbsp; &nbsp; &nbsp;picBall.style.top = y + "px";&nbsp;}&nbsp;function applyInterval() {&nbsp; if (interval) {&nbsp; &nbsp; console.log('Clearing previous interval');&nbsp; &nbsp; clearInterval(interval);&nbsp; }&nbsp; console.log('Applying new interval');&nbsp; interval = window.setInterval("MoveBall()", timing);}function MoveBall() {&nbsp; &nbsp; &nbsp;x = x + 5;&nbsp; &nbsp; &nbsp;if (x < document.body.clientWidth - 91) {&nbsp; &nbsp; &nbsp; &nbsp; picBall.style.left = x + "px";&nbsp; &nbsp; }}function btnReset_OnClick() {&nbsp; &nbsp; x = 0;}function btnSpeed_OnClick() {&nbsp; &nbsp; timing = parseInt(txtSpeed.value);&nbsp; &nbsp; 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"&nbsp; &nbsp; &nbsp; &nbsp;onclick="btnReset_OnClick()"/><input id="txtSpeed" type="text"/><input id="btnSpeed" type="button" value="Change Speed"&nbsp; &nbsp;onclick="btnSpeed_OnClick()"/>