如何实时更改设置间隔的速度

How to change the speed of setInterval in real time

本文关键字：设置 速度 何实时 实时      更新时间：2023-09-26

我想知道如何实时更改setInterval的速度，例如：

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

我知道这种方法不起作用，但是有没有办法以其他方式实现这一目标？

jsFiddle Demo

一旦运行，就无法更改间隔速度本身。唯一的方法是有一个速度变量，然后清除间隔并以新速度开始一个新的间隔。

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

另一种方法是只使用 setTimeout 而不是 setInterval 。 每次都进行检查，以便您可以将速度逻辑保存在单独的函数中。

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小提琴 http://jsfiddle.net/bq926xz6/

您可以使用

clearInterval：

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

但这取决于上下文。如果此代码段的执行频率高于必须的执行频率，您将需要某种机制来防止它一直重置您的间隔。

但是（正如我在问题的评论中所写）没有办法使用clearInterval并更改间隔本身。至少不会不将其替换为如上所示的新间隔。

您可以使用游戏循环并跟踪敌人职业中的生成状态：

// 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/

相关文章：