CODEWITHSUNDEEP
javascripthtmlsetinterval
Harry-Parker976
Harry-Parker976

Reputation: 21

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

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()"/>

Upvotes: 2

Views: 950

Answers (3)

Claudio
Claudio

Reputation: 5203

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.sstatic.net/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()"/>

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

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

Upvotes: 0

Eriks Klotins
Eriks Klotins

Reputation: 4180

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

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

Upvotes: 1

Related Questions