CODEWITHSUNDEEP
javascriptsetintervalintervals
lmaodude
lmaodude

Reputation: 3

How to increase or decrease interval gradually in setInterval()

var x = 0;

var int = 1000; //1000ms interval

function Start(){
    setInterval(function(){
        console.log(x += 1);  //increasing x value by 1 every int miliseconds

        console.log("Interval: " + int);  //outputting interval value (in my case, it is always 1000ms, i want it to be for example: 1000ms, 950ms, 900ms, 850ms, ... , 15ms, 10ms, 5ms, 0ms)

    }, int); //how to increase/decrease this 'int' value gradually - (for example: 1000ms, 950ms, 900ms, 850ms, ... , 15ms, 10ms, 5ms, 0ms)
}

My goal: Gradually increase 'x' value by 1 (at the beginning, 'x' is increasing slowly, and as it goes, it starts to increase faster and faster)

Upvotes: 0

Views: 2710

Answers (5)

andnik
andnik

Reputation: 2804

As far as I understand your idea is to have gradual int value change. I came up with little algorithm for you. I change int by step value, which is becoming roughly 2 times smaller every time we get to the middle of the previoustop` value. Here is the code:

var x = 0,
    top = 1000,
    middle = top / 2,
    int = 1000,
    step = 50,
    minStep = 5;

function start()
{
    if (int <= middle && step > minStep) {
        top = middle;
        middle = top / 2;
        if (middle % 50) {
            middle = Math.floor(middle / 50) * 50;
        }
        step /= 2
        if (step % 5) {
            step = (Math.floor(step / 5) + 1) * 5;
        }
    }
    if (!int) return;
    setTimeout(function() {
       console.log(x++);
       // to check how int changes: console.log("int: " + int);
       int -= step;
       start();
    }, int);
}

start();

Hope this is useful.

Upvotes: 0

Shivam Dhruva
Shivam Dhruva

Reputation: 1

It is also possible by just using setInterval by re-initiating the function.

(function(){
  var x = 0;
  var interval = 1000; //1000ms interval
  var decreaseBy = 100;
  var scheduler;
  
  function setScheduler(){
    scheduler = null;
    scheduler = setInterval(function(){
      intervalTask();
    }, interval);
  }
  
  function intervalTask() {
    
    // function that you want to execute
    console.log(x += 1);

    console.log("current interval: " + interval);
    
    clearInterval(scheduler);
    
    if(interval <= 0) {
      return;
    }
    
    interval = interval - decreaseBy;
    
    // define it again to reinitiate the interval
    setScheduler();
  }
  
  // start it when you need it to
  setScheduler();
  
})();

Upvotes: 0

Shidersz
Shidersz

Reputation: 17190

Use setTimeout() instead with a recursive approach calling itself with a lower delay value every time. Check the next example:

var x = 0;
var time = 1000;

function Start()
{
    x += 1;
    time -= 50;
    console.log("x:" + x, "time:" + time);

    if (time > 0)
        setTimeout(Start, time);
}

// Initialize the recursive calls.

Start();

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

Once you establish a timer's time, it can't be changed. The solution is to use setTimeout instead of setInterval so that you can establish a new timer with a new delay. Each successive timer can then use a different time:

var x = 100;      // Display data
var int = 1000;   // Initial delay
var timer = null; // will hold reference to timer

function countDown(){
  if(x === -1){ return; } // exit function when timer reaches 0
  console.log(x);

  // recursive call to current function will establish a new timer
  // with whatever the delay variable currently is
  setTimeout(countDown, int); 

  int -= 10; // Decrease the delay for the next timer
  x--;       // Decrease the display data
}

countDown();

Upvotes: 0

Studio KonKon
Studio KonKon

Reputation: 790

As stated by temmu, you can't. However, it would be a bad idea to create a new interval each time as this would cause some serious memory leak.

Use a setTimeout instead:

var x = 0,
    int = 1000;

function start()
{
   setTimeout(function() {
      console.log(x++);
      int -= 50;
      start();
   }, int);
}

start();

Upvotes: 1

Related Questions