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

发生这种情况是因为interval仅在初始化时使用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 doesn't have an onLoad event。您必须将此代码放在其他位置。

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>

所以基本上我在上面所做的是创建一个实际变量来跟踪超时obj，然后创建一个函数来调用它。

接下来，在changeSpeed函数内部，清除超时以使其停止运行，然后设置新值。最后，再次调用setTimer以新值重新启动它。

我将x值设为随机数，因此您可以更轻松地多次看到更改。

变量不会影响setInterval循环的速度

2 个答案: