Variable doesn't influence speed of setInterval loop

Question

I want the speed of my loop to be influenced by a variable (x). This will influence how fast a value (t) is increased, when a button is clicked. I wrote my code, and it should work but it doesn't. Help.

var timeCounter = document.getElementById("time");
var x;
var t;
function timeOnLoad(){
  time = 0;
  x = 1000;
}
setInterval(function(){
  t++;
  timeCounter.innerHTML = t;
},x)

function changeSpeed(){
  x = 2000;
}
function valueSpeed(){
  alert(x);
}

body{
  background-color:white;
}

<div onload="timeOnLoad()" id="time"></div>
<button onclick="changeSpeed()">Change x by 1 sec</button>
<button onclick="valueSpeed()">Get value of x</button>

because once it is set, it is set.... It does not keep checking it. If you want to change it, you need to cancel the interval and create a new one. — epascarello, Dec 17 '18 at 17:46
Create a new `setTimeout` each time. The `setInterval` doesn't care what the variable's value is after the first call. — zero298, Dec 17 '18 at 17:46
Calling `setInterval()` and passing `x` passes a *copy* of the value of `x`. JavaScript always works that way. — Pointy, Dec 17 '18 at 17:46

Nelson Teixeira · Answer 1 · 2018-12-20T14:17:58.387

That happens because interval uses x variable only on initialization. It's not dynamic. You have to stop the timer and reinstantiate it in order for it to work. Here's an example:

var timeCounter = document.getElementById("time");
var t = 0, x = 1000, interval;

function changeSpeed(){
  x = x + 1000;
  restartInterval();
}
function valueSpeed(){
  alert(x);
}

function restartInterval() {
  clearInterval(interval);
  interval = setInterval(function(){
    t++;
    timeCounter.innerHTML = t;
  }, x);
}

restartInterval();

body{
  background-color:white;
}

<div id="time"></div>
<button onclick="changeSpeed()">Change x by 1 sec</button>
<button onclick="valueSpeed()">Get value of x</button>

Also, div doesn't have an onLoad event. You have to put this code elsewhere.

score 0 · Answer 2 · answered Dec 17 '18 at 17:59

You need to cancel and re-instantiate the setInterval when you want to update it. The value set is not dynamic and once it is set it remains at that value.

var timeCounter = document.getElementById("time");
var x = 1;
var t = 0;
function timeOnLoad(){
  time = 0;
  x = 1000;
}

// Create a function to init the timer. Additionally, create a var to track the actual timeout. 

var timer = null;
function setTimer() {
  console.log("Setting time to: " + x);
  timer = setInterval(function(){
    t++;
    timeCounter.innerHTML = t;
  },x);
}

// Clear the timeout and update the value. Then call your timeout again. 
function changeSpeed(){
  clearTimeout(timer);
  x = Math.floor(Math.random() * 5000);
  setTimer();
}

function valueSpeed(){
  alert(x);
}

setTimer();

<p id="time"></p>
<button id="updatetime" onclick="changeSpeed()">Cickme</button>

So basically what I did above was create an actual variable to track the timeout obj and then create a function to call it.

Next, inside of your changeSpeed function, clear the timeout to stop it from running and then set your new value. Finally call your setTimer again to restart it with the new value.

I made the x value a random number so you could more easily see the change multiple times.

Variable doesn't influence speed of setInterval loop

2 Answers2