如何在 setInterval() 中逐渐增加或减少间隔

Question

var x = 0;

var int = 1000; //1000ms interval

function Start(){
    setInterval(function(){
        console.log(x += 1);  //increasing x value by 1 every int miliseconds

        console.log("Interval: " + int);  //outputting interval value (in my case, it is always 1000ms, i want it to be for example: 1000ms, 950ms, 900ms, 850ms, ... , 15ms, 10ms, 5ms, 0ms)

    }, int); //how to increase/decrease this 'int' value gradually - (for example: 1000ms, 950ms, 900ms, 850ms, ... , 15ms, 10ms, 5ms, 0ms)
}

我的目标：逐渐将'x'值增加1（开始时，'x'增加缓慢，随着时间的推移，开始增加得越来越快）

Answer 1

使用 setTimeout() 而不是递归方法，每次都使用较低的 delay 值调用自身。检查下一个示例：

var x = 0;
var time = 1000;

function Start()
{
    x += 1;
    time -= 50;
    console.log("x:" + x, "time:" + time);

    if (time > 0)
        setTimeout(Start, time);
}

// Initialize the recursive calls.

Start();

Answer 2

计时器的时间一旦确定就无法更改。解决方案是使用 setTimeout 而不是 setInterval 以便您可以建立一个具有新延迟的新计时器。然后每个连续的计时器可以使用不同的时间：

var x = 100;      // Display data
var int = 1000;   // Initial delay
var timer = null; // will hold reference to timer

function countDown(){
  if(x === -1){ return; } // exit function when timer reaches 0
  console.log(x);

  // recursive call to current function will establish a new timer
  // with whatever the delay variable currently is
  setTimeout(countDown, int); 

  int -= 10; // Decrease the delay for the next timer
  x--;       // Decrease the display data
}

countDown();

Answer 3

正如 temmu 所说，你不能。但是，每次都创建一个新的间隔是个坏主意，因为这会导致严重的内存泄漏。

改用setTimeout：

var x = 0,
    int = 1000;

function start()
{
   setTimeout(function() {
      console.log(x++);
      int -= 50;
      start();
   }, int);
}

start();

Answer 4

也可以只用setInterval重新启动函数

(function(){
  var x = 0;
  var interval = 1000; //1000ms interval
  var decreaseBy = 100;
  var scheduler;
  
  function setScheduler(){
    scheduler = null;
    scheduler = setInterval(function(){
      intervalTask();
    }, interval);
  }
  
  function intervalTask() {
    
    // function that you want to execute
    console.log(x += 1);

    console.log("current interval: " + interval);
    
    clearInterval(scheduler);
    
    if(interval <= 0) {
      return;
    }
    
    interval = interval - decreaseBy;
    
    // define it again to reinitiate the interval
    setScheduler();
  }
  
  // start it when you need it to
  setScheduler();
  
})();

Answer 5

据我了解，您的想法是逐渐 int 改变价值。我想出了一个小算法给你。我将 int 更改为 step value, which is becoming roughly 2 times smaller every time we get to the middle of the previoustop` 值。这是代码：

var x = 0,
    top = 1000,
    middle = top / 2,
    int = 1000,
    step = 50,
    minStep = 5;

function start()
{
    if (int <= middle && step > minStep) {
        top = middle;
        middle = top / 2;
        if (middle % 50) {
            middle = Math.floor(middle / 50) * 50;
        }
        step /= 2
        if (step % 5) {
            step = (Math.floor(step / 5) + 1) * 5;
        }
    }
    if (!int) return;
    setTimeout(function() {
       console.log(x++);
       // to check how int changes: console.log("int: " + int);
       int -= step;
       start();
    }, int);
}

start();

希望这有用。

如何在 setInterval() 中逐渐增加或减少间隔

How to increase or decrease interval gradually in setInterval()

javascript

intervals

setinterval