How to change the time in setInterval with an user input?

Question

I want to know a way to change the setInterval time so my image would move across the screen at that pace. Example if i put in 500 milliseconds it would change the time interval from 250 to 500 when i click a button. Here is what I came up with so far.

 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

I suggest not to mix moving speed with framerate (your setInterval speed). You can have a fixed framerate and variable speed. Eg

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

Your main issue is that you need to clear the previous interval and create a new one. However, I'd recommend moving your code that creates the interval into another function like this...

 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

You have to save a reference to interval and then, every time you want to change the speed you have to clear the previous interval with clearInterval and then apply a new interval, like this:

 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

wou should create time interval fanction manually