12

I have this fiddle : https://jsfiddle.net/reko91/stfnzoo4/

Im currently using Javascripts setInterval() to log a string to console.

What I want to do, is in this setInterval function check whether the interval variable has changed, if it has, change the interval in the setInterval function. I can lower the interval variable by 100 (speeding the function up) by a click a button.

Is this possible ?

Someone mentioned this : Changing the interval of SetInterval while it's running

But this is using a counter, so they only run it a certain amount of times. I need to run it for however long, but change how fast the function gets called again.

Here is the code : 

var interval = 2000;

setInterval(function() {
  interval = getInterval();
  console.log('interval')
}, interval);


function getInterval() {
  return interval;
}


$('#speedUp').on('click', function() {
  interval -= 100;
  console.log(interval)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
  speed up
</button>
Community
  • 1
  • 1
thatOneGuy
  • 9,977
  • 7
  • 48
  • 90
  • 3
    Possible duplicate of [Changing the interval of SetInterval while it's running](http://stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running) – 8eecf0d2 Feb 16 '16 at 20:24

1 Answers1

17

I would just stop the interval and start a new one with the different timing

var interval = 2000;
var intervalId;

// store in a function so we can call it again
function startInterval(_interval) {
  // Store the id of the interval so we can clear it later
  intervalId = setInterval(function() {
    console.log(_interval);
  }, _interval);
}


function getInterval() {
  return interval;
}


$('#speedUp').on('click', function() {
  interval -= 100;
  // clear the existing interval
  clearInterval(intervalId);
  // just start a new one
  startInterval(interval);
  console.log(interval)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
  speed up
</button>
Dustin Stiles
  • 1,414
  • 9
  • 12
  • 1
    Excellent, there was one answer on the one I referred to that is similar to this, but this answers it perfectly. Thank you – thatOneGuy Feb 16 '16 at 20:36
  • Yup, the one that was linked was about consistent changes in the interval, although your case requires it to be changed dynamically. you can have preset 'timings' and let the user choose :p EX. 'go super fast!', 'turtle slow!' – Dustin Stiles Feb 16 '16 at 20:39
  • exactly what I need it for ;) Thanks again – thatOneGuy Feb 16 '16 at 20:45
  • There the /slight/ issue that hitting the button STOPS the current running interval and starts a new one. The net effect is that if you have a scheduled interval coming up, it gets skipped. On the other hand if you force the code to run when you hit speed up, you might end up doubling things up Depending on *what* you are checking this may, or may not be an issue. – Jeremy J Starcher Feb 16 '16 at 21:17