使用setInterval时如何动态更改间隔 [英] How to change the interval dynamically when using setInterval

问题描述

我有这个小提琴: https://jsfiddle.net/reko91/stfnzoo4/

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

我想做的是在此setInterval函数中检查interval变量是否已更改，如果已更改，请更改setInterval函数中的间隔.我可以通过单击按钮将间隔变量降低100(以加快功能).

这可能吗?

有人提到了这一点:更改SetInterval的运行间隔

但是这使用了一个计数器，所以他们只运行一定的次数.我需要运行很长时间，但是要更改再次调用该函数的速度.

这是代码:

 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> 

解决方案

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

 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> 

I have this fiddle : https://jsfiddle.net/reko91/stfnzoo4/

Im currently using Javascripts setInterval() to log a string to console.

What I want to do, is in this setInterval function check whether the interval variable has changed, if it has, change the interval in the setInterval function. I can lower the interval variable by 100 (speeding the function up) by a click a button.

Is this possible ?

Someone mentioned this : Changing the interval of SetInterval while it's running

But this is using a counter, so they only run it a certain amount of times. I need to run it for however long, but change how fast the function gets called again.

Here is the code :

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>

解决方案

I would just stop the interval and start a new one with the different timing

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>

这篇关于使用setInterval时如何动态更改间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！