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

Question

我有这个小提琴：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>