在运行时更改 SetInterval 的间隔

IT技术 javascript timer setinterval
2021-02-03 00:17:13

我编写了一个 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。

那么,如何在每次匿名函数运行时调整间隔呢?

6个回答

您可以使用匿名函数:

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);
@A.Wolff 请注意,您不需要定义超时变量......他们没有做任何事情
2021-03-13 00:17:13
为什么要使用间隔,简单的超时会更好,而无需清除它。例如:jsfiddle.net/fgs5nwgn
2021-03-24 00:17:13
我坚持问题的上下文。setTimeout 当然会起作用
2021-03-27 00:17:13
好吧,RozzA,我的回答是在 2011 年 9 月 16 日发布的,而 user28958 是在 2013 年 8 月 22 日发布的,所以我会接受“代表”,谢谢!
2021-04-09 00:17:13

使用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);
在这里挑剔,但我必须说,该代码很难阅读。如果您要使用下一行大括号,至少要体面地使用 4-8 个空格的缩进或永远不要超过 2 个缩进。IMO这个版本更容易阅读。还要注意tto的重命名tick,这是我对“t”应该代表什么的最好猜测。t是一个非常糟糕的变量名。
2021-03-13 00:17:13
如果times太大,递归地执行此操作是否不会冒堆栈溢出错误的风险
2021-03-30 00:17:13
通过回调,您的意思是函数的最后一行使用 setTimeout(..., newInterval) 递归调用自身吗?
2021-03-31 00:17:13
我想这就是他的意思。我刚刚尝试过,它似乎有效。多谢你们!
2021-04-03 00:17:13
只给 9 嗨 :)--t应该是t-- jsfiddle.net/albertjan/by5fd
2021-04-05 00:17:13

我喜欢这个问题——启发了我的一个小计时器对象:

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);
谢谢 - 让我朝着正确的方向前进,从事类似的工作。
2021-03-14 00:17:13
简单有效。谢谢!
2021-03-23 00:17:13

我有与原始海报相同的问题,将其作为解决方案。不知道这有多有效......

interval = 5000; // initial condition
var 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()

    }
我 99% 确定您的声明setInterval是错误的@RozzA - 它仍然与任何其他 JavaScript 一样受到相同的延迟,并且几乎每个浏览器也将 setInterval 限制为 4 毫秒。你有关于这个或其他东西的帖子的链接吗?
2021-03-27 00:17:13
我更喜欢这个答案,因为它实际上回答了 OP(和我的)问题。setTimeout 可能会被延迟(通过 100% 的 CPU 使用、其他脚本等),因为 setInterval 不受这些延迟的影响——这使得它对于“实时”的东西来说要好得多
2021-04-08 00:17:13

这是我这样做的方式,我使用 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();
还修改了set_interval函数,除非新间隔小于旧间隔,否则不会启动新的执行。if (iv < this.iv) { clearInterval(this.timeout); this.start(false, iv); } else { this.iv = iv; }
2021-03-19 00:17:13
+1,我为了我的目的稍微修改了它,所以我可以使用多个可变间隔 - jsfiddle.net/h70mzvdq
2021-04-02 00:17:13
我也喜欢这个解决方案,但更喜欢如果计时器没有改变,除非它与上一个不同 1/2 秒。我将set_interval函数修改为:let round = Math.trunc( iv / 500) * 500; if (round != this.iv ) { clearInterval( this.timeout ); this.start( false, round ); }
2021-04-04 00:17:13
我也为我的用例修改了这个。
2021-04-10 00:17:13