Переменная не влияет на скорость цикла setInterval

Question

Я хочу, чтобы скорость моего цикла зависела от переменной (x).Это будет влиять на то, насколько быстро увеличивается значение (t) при нажатии кнопки.Я написал свой код, и он должен работать, но это не так.Справка.

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>

Answer 1

Это происходит потому, что интервал использует переменную x только при инициализации.Это не динамично.Вы должны остановить таймер и восстановить его, чтобы он заработал.Вот пример:

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>

Кроме того, div не имеет события onLoad .Вы должны поместить этот код в другом месте.

Answer 2

Вам нужно отменить и заново создать setInterval, когда вы хотите обновить его.Установленное значение не является динамическим, и как только оно установлено, оно остается на этом значении.

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>

Таким образом, в основном то, что я делал выше, было создание фактической переменной для отслеживания объекта timeout, а затем создание функции для его вызова.

Затем, внутри вашей функции changeSpeed, очистите тайм-аут, чтобы остановить его запуск, а затем установите новое значение.Наконец, снова вызовите ваш setTimer, чтобы перезапустить его с новым значением.

Я сделал значение x случайным числом, чтобы вы могли легче увидеть изменение несколько раз.