javascript - 如何在使用 setInterval 时动态更改间隔

Question

我有这个 fiddle :https://jsfiddle.net/reko91/stfnzoo4/

我目前正在使用 Javascripts setInterval() 将字符串记录到控制台。

我想做的是，在这个 setInterval 函数中检查间隔变量是否已更改，如果已更改，则在 setInterval 函数中更改间隔。我可以通过单击按钮将间隔变量降低 100(加快函数速度)。

这可能吗？

有人提到这个:Changing the interval of SetInterval while it's running

但这是使用计数器，所以他们只运行一定次数。无论多长时间，我都需要运行它，但要更改再次调用该函数的速度。

代码如下:

var interval = 2000;

setInterval(function() {
  interval = getInterval();
  console.log('interval')
}, interval);


function getInterval() {
  return interval;
}


$('#speedUp').on('click', function() {
  interval -= 100;
  console.log(interval)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
  speed up
</button>

Answer 1

我会停止间隔并以不同的时间开始一个新的间隔

var interval = 2000;
var intervalId;

// store in a function so we can call it again
function startInterval(_interval) {
  // Store the id of the interval so we can clear it later
  intervalId = setInterval(function() {
    console.log(_interval);
  }, _interval);
}


function getInterval() {
  return interval;
}


$('#speedUp').on('click', function() {
  interval -= 100;
  // clear the existing interval
  clearInterval(intervalId);
  // just start a new one
  startInterval(interval);
  console.log(interval)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
  speed up
</button>