更改SetInterval的运行间隔时间

Question

更改SetInterval的运行间隔时间

198

我编写了一个JavaScript函数，使用setInterval在一定的迭代次数内每隔十分之一秒操作一个字符串。

function timer() {
    var section = document.getElementById('txt').value;
    var len = section.length;
    var rands = new Array();

    for (i=0; i<len; i++) {
        rands.push(Math.floor(Math.random()*len));
    };

    var counter = 0
    var interval = setInterval(function() {
        var letters = section.split('');
        for (j=0; j < len; j++) {
            if (counter < rands[j]) {
                letters[j] = Math.floor(Math.random()*9);
            };
        };
        document.getElementById('txt').value = letters.join('');
        counter++

        if (counter > rands.max()) {
            clearInterval(interval);
        }
    }, 100);
};

不想将时间间隔设置为固定数值，我希望每次运行时都根据计数器进行更新。因此，不再使用以下形式：

var interval = setInterval(function() { ... }, 100);

它会类似于这样：

var interval = setInterval(function() { ... }, 10*counter);

不幸的是，那没有起作用。看起来 "10*counter" 等于0。

那么，我该如何调整每次匿名函数运行的间隔时间呢？

- Joe Di Stefano

17个回答

131

使用 setTimeout() 代替。回调函数应该负责触发下一个超时，此时你可以增加或者以其他方式操作时间。

编辑

这里是一个通用的函数，您可以将其用于任何函数调用的“减速”超时。

function setDeceleratingTimeout(callback, factor, times)
{
    var internalCallback = function(tick, counter) {
        return function() {
            if (--tick >= 0) {
                window.setTimeout(internalCallback, ++counter * factor);
                callback();
            }
        }
    }(times, 0);

    window.setTimeout(internalCallback, factor);
};

// console.log() requires firebug    
setDeceleratingTimeout(function(){ console.log('hi'); }, 10, 10);
setDeceleratingTimeout(function(){ console.log('bye'); }, 100, 10);

- Peter Bailey

1

你所说的回调函数，是指在函数的最后一行通过setTimeout(..., newInterval)递归地调用自身吗？ - Marc

2

仅返回 9 个“hi” :) --t 可能应该改为 t-- http://jsfiddle.net/albertjan/by5fd/ - albertjan

2

如果递归地执行这个操作，如果times太大，难道你不会冒堆栈溢出的风险吗？ - André C. Andersen

5

在这里有点挑剔，但我必须说，那段代码相当难懂。如果你要使用下一行括号，请至少有良好的修饰，要么使用4-8个空格缩进或者不超过2次缩进。在我看来，这个版本更易读。也请注意将“t”重命名为“tick”，这是我最好的猜测，无论“t”代表什么。“t”是一个相当糟糕的变量名。 - Braden Best

1

@AndréChristofferAndersen，这也是我的担忧。他们每次调用都会加深堆栈。我为多小时的时间间隔设置了约500毫秒的间隔。堆栈会变得非常庞大！ - JacksonHaenchen

显示剩余7条评论

24

我喜欢这个问题-它在我里面激发了一个小计时器对象：

window.setVariableInterval = function(callbackFunc, timing) {
  var variableInterval = {
    interval: timing,
    callback: callbackFunc,
    stopped: false,
    runLoop: function() {
      if (variableInterval.stopped) return;
      var result = variableInterval.callback.call(variableInterval);
      if (typeof result == 'number')
      {
        if (result === 0) return;
        variableInterval.interval = result;
      }
      variableInterval.loop();
    },
    stop: function() {
      this.stopped = true;
      window.clearTimeout(this.timeout);
    },
    start: function() {
      this.stopped = false;
      return this.loop();
    },
    loop: function() {
      this.timeout = window.setTimeout(this.runLoop, this.interval);
      return this;
    }
  };

  return variableInterval.start();
};

例子用法

var vi = setVariableInterval(function() {
  // this is the variableInterval - so we can change/get the interval here:
  var interval = this.interval;

  // print it for the hell of it
  console.log(interval);

  // we can stop ourselves.
  if (interval>4000) this.stop();

  // we could return a new interval after doing something
  return interval + 100;
}, 100);  

// we can change the interval down here too
setTimeout(function() {
  vi.interval = 3500;
}, 1000);

// or tell it to start back up in a minute
setTimeout(function() {
  vi.interval = 100;
  vi.start();
}, 60000);

- gnarf

4

谢谢 - 这让我在我正在处理的类似事情上朝着正确的方向前进了。 - Colonel Sponsz

简单而有效。谢谢！ - Jester

24

我和原帖作者有同样的问题，我尝试了以下解决方案。不确定这是否高效....

let interval = 5000; // initial condition
let run = setInterval(request, interval); // start setInterval as "run"

function request() {

    console.log(interval); // firebug or chrome log
    clearInterval(run); // stop the setInterval()

    // dynamically change the run interval
    if (interval > 200) {
        interval = interval * .8;
    } else {
        interval = interval * 1.2;
    }

    run = setInterval(request, interval); // start the setInterval()
}

- user28958

1

我更喜欢这个答案，因为它实际上回答了OP（和我的）问题。setTimeout受延迟的影响（100％ CPU使用率，其他脚本等），而setInterval不受这些延迟的影响-使其在“实时”方面更加优越。 - RozzA

11

我99%确信你对于 setInterval 的说法是错误的，@RozzA - 它仍然受到与其他JavaScript相同的延迟影响，几乎所有浏览器也会将setInterval限制为4毫秒。你有任何相关的帖子或链接吗？ - gnarf

16

这是我的做法，我使用setTimeout：

var timer = {
    running: false,
    iv: 5000,
    timeout: false,
    cb : function(){},
    start : function(cb,iv){
        var elm = this;
        clearInterval(this.timeout);
        this.running = true;
        if(cb) this.cb = cb;
        if(iv) this.iv = iv;
        this.timeout = setTimeout(function(){elm.execute(elm)}, this.iv);
    },
    execute : function(e){
        if(!e.running) return false;
        e.cb();
        e.start();
    },
    stop : function(){
        this.running = false;
    },
    set_interval : function(iv){
        clearInterval(this.timeout);
        this.start(false, iv);
    }
};

使用方法：

timer.start(function(){
    console.debug('go');
}, 2000);

timer.set_interval(500);

timer.stop();

- Jaapze

1

+1，我稍微修改了一下以适应我的需求，这样我就可以使用多个变量间隔 - http://jsfiddle.net/h70mzvdq/ - Smern

还修改了 set_interval 函数，除非新的间隔时间比旧的间隔时间更短，否则不会启动新的执行。

if (iv < this.iv) {                 clearInterval(this.timeout);                 this.start(false, iv);             } else {                 this.iv = iv;             }

- Smern

我也喜欢这个解决方案，但更希望计时器不会改变，除非它与上次相差1/2秒。我修改了set_interval函数如下：

      if (round !=  this.iv )
      {
         clearInterval( this.timeout );
         this.start( false, round );
      }```

- ztalbot

我也根据我的使用情况进行了修改。 - doptimusprime

12

一个更简单的方法是在刷新函数中加入一个if语句和一个控制以定时间隔执行命令。在下面的例子中，我每2秒运行一个提示框，并且间隔时间（intrv）可以动态改变...

var i=1;
var intrv=2; // << control this variable

var refreshId = setInterval(function() {
  if(!(i%intrv)) {
    alert('run!');
  }
  i++;
}, 1000);

- Kiril Cvetkov

这也是我的个人最爱。小巧、简单、可扩展。 - guy mograbi

我需要一个减速计时器的解决方案，它可以根据应用程序事件重置其速率；这个解决方案非常简单和完美地满足了我的需求。谢谢。 - Andrew Brown

这很酷，但它也会在你不需要的时刻触发间隔...而且有点难以阅读。因为这些原因，我个人更喜欢使用setTimeout。 - Kokodoko

4

这可以按照您的意愿启动。timeout是我用来保持它在整点上的方法。

我需要每个小时在整点开始一个代码块。因此，这将在服务器启动时开始并每小时运行间隔。基本上，初始运行是为了在同一分钟内开始间隔。因此，在init后的一秒钟内立即运行，然后每5秒运行一次。

var interval = 1000;
var timing =function(){
    var timer = setInterval(function(){
        console.log(interval);
        if(interval == 1000){ /*interval you dont want anymore or increment/decrement */
            interval = 3600000; /* Increment you do want for timer */
            clearInterval(timer);
            timing();
        }
    },interval);
}
timing();

如果你只想在开始时和特定时间间隔内做某些事情，可以同时调用它和setInterval。例如：

var this = function(){
 //do
}
setInterval(function(){
  this()
},3600000)
this()

这里我们首次运行，然后每小时运行一次。

- Dgerena

2

(function variableInterval() {
    //whatever needs to be done
    interval *= 2; //deal with your interval
    setTimeout(variableInterval, interval);
    //whatever needs to be done
})();

无法再缩短

- mikakun

2

我之前无法同步和改变setInterval的速度，本来想发帖求助。但是我找到了一种方法。由于我是初学者，这种方法肯定需要改进。所以，我很乐意听取您的评论/建议。

<body onload="foo()">
<div id="count1">0</div>
<div id="count2">2nd counter is stopped</div>
<button onclick="speed0()">pause</button>
<button onclick="speedx(1)">normal speed</button>
<button onclick="speedx(2)">speed x2</button>
<button onclick="speedx(4)">speed x4</button>
<button onclick="startTimer2()">Start second timer</button>
</body>
<script>
var count1 = 0,
    count2 = 0,
    greenlight = new Boolean(0), //blocks 2nd counter
    speed = 1000,   //1second
    countingSpeed;
function foo(){
    countingSpeed = setInterval(function(){
        counter1();
        counter2();
    },speed);
}
function counter1(){
    count1++;
    document.getElementById("count1").innerHTML=count1;
}
function counter2(){
    if (greenlight != false) {
        count2++;
        document.getElementById("count2").innerHTML=count2;
    }
}
function startTimer2(){
    //while the button hasn't been clicked, greenlight boolean is false
    //thus, the 2nd timer is blocked
    greenlight = true;
    counter2();
    //counter2() is greenlighted
}

//these functions modify the speed of the counters
function speed0(){
    clearInterval(countingSpeed);
}
function speedx(a){
    clearInterval(countingSpeed);
    speed=1000/a;
    foo();
}
</script>

如果您希望页面加载后计数器立即开始增加，请在调用countingSpeed之前将counter1()和counter2()放在foo()中。否则，需要等待speed毫秒后才执行。编辑：更短的答案。

- B. E. A. G. M. B.

2

你可以通过在每次迭代时清除间隔、更改计时器值并重新设置间隔来实现这一点。希望能帮到你 ;)

For exemple:

const DOMCounter = document.querySelector(".counter")

let timer = 1000

const changeCounter = () => {
  clearInterval(interval)
  DOMCounter.innerHTML = timer
  timer += 1000
  timer == 5000 && timer == 1000
  interval = setInterval(changeCounter, timer)
}

let interval = setInterval(changeCounter, timer)

<div class="container">
  <p class="counter"></p>
</div>

- Ahmed Lemssiah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nick · Accepted Answer

你可以使用一个匿名函数：

var counter = 10;
var myFunction = function(){
    clearInterval(interval);
    counter *= 10;
    interval = setInterval(myFunction, counter);
}
var interval = setInterval(myFunction, counter);

更新：如A.Wolff所建议，使用setTimeout来避免需要clearInterval的情况。

var counter = 10;
var myFunction = function() {
    counter *= 10;
    setTimeout(myFunction, counter);
}
setTimeout(myFunction, counter);