Как изменить время в 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

Вы должны сохранить ссылку на интервал, а затем, каждый раз, когда вы хотите изменить скорость, вы должны очистить предыдущий интервал с помощью 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 3

Ваша главная проблема заключается в том, что вам нужно очистить предыдущий интервал и создать новый. Однако я бы порекомендовал переместить ваш код, который создает интервал, в другую функцию, подобную этой ...

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);
}