CODEWITHSUNDEEP
javascript
TeaAnyOne
TeaAnyOne

Reputation: 497

How to change the speed of setInterval in real time

I would like to know how to change the speed of setInterval in real time e.g:

if (score < 10)
    repeater = setInterval(function() {
        spawnEnemy();
    }, 1000);
if (score => 10)
    repeater = setInterval(function() {
        spawnEnemy();
    }, 500);

I know this method doesn't work, but is there a way that I can achieve this some other way?

Upvotes: 5

Views: 10321

Answers (4)

Phil
Phil

Reputation: 2303

Another way would be to just use setTimeout rather than setInterval. Do the check every time so you can keep your speed logic in a separate function.

var game_over = false;
var score = 0;

function getSpeedFromScore(score) {
  if (score > 20) {
    game_over = true;
  }

  if (score < 10) {
    return 1000;
  } else {
    return 500;
  }
}

function spawnEnemyThenWait() {
  if (!game_over) {
    spawnEnemy();

    var speed = getSpeedFromScore(score);
    setTimeout(spawnEnemyThenWait, speed);
  }
}

function spawnEnemy() {
  document.getElementById("output").textContent = "Enemey spawned: score " + score;
  score++;
}

spawnEnemyThenWait();
<div id="output"></div>

JS Fiddle http://jsfiddle.net/bq926xz6/

Upvotes: 4

Martijn
Martijn

Reputation: 1459

You can use a game loop and track the spawn state in an enemy class:

// press f12 so see console
function Enemy() {
  this.spawned = false;
  this.spawnOn = 20;

  this.tick = function() {
    this.spawnOn = this.spawnOn - 1;
    if (this.spawnOn == 0) {
      this.spawned = true;
    }
  }

  this.goBackToYourCage = function() {
    this.spawnOn = Math.floor(Math.random() * 50) + 1;
    this.spawned = false;
  }
}

var enemy = new Enemy();

window.setInterval(function() {
  enemy.tick();
  
  if (enemy.spawned) {
    console.log('spawned');
    enemy.goBackToYourCage();
    console.log('Next spawin in :' + enemy.spawnOn);
  }
}, 100);

http://jsfiddle.net/martijn/qxt2fe8y/2/

Upvotes: 1

Travis J
Travis J

Reputation: 82297

jsFiddle Demo

There is no way to change the interval speed itself once running. The only way to do it is to have a variable for the speed, and then clear the interval and start a new one with the new speed.

var speed = 500;
var changeSpeed = speed;
repeater = setInterval(repeaterFn, speed);
function repeaterFn(){
    spawnEnemy();
    if( changeSpeed != speed ){
     clearInterval(repeater);
     speed = changeSpeed;
     repeater = setInterval(repeaterFn, speed);
    }
}
function changeRepeater(){
 changeSpeed = 700;
}

Upvotes: 5

Matteo B.
Matteo B.

Reputation: 4074

You can use clearInterval:

if (score < 10) {
  clearInterval(repeater);
  repeater = setInterval(spawnEnemy, 1000);
}
if (score => 10) {
  clearInterval(repeater);
  repeater = setInterval(spawnEnemy, 500);
}

But it depends on the context. If this snippet is executed more often, than it has to be, you will need some kind of mechanism to prevent it from resetting your interval all the time.

But there is (as I wrote in the comment to the question) no way to use clearInterval and change the interval itself. At least not without replacing it by a new interval as shown above.

Upvotes: 2

Related Questions