如何通过用户输入更改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()"/>

Answer 4

您应该手动创建时间间隔功能