在运行时更改SetInterval的间隔


161

我编写了一个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 *计数器”等于0。

因此,如何在每次匿名函数运行时调整时间间隔?

Answers:


107

使用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);

1
通过回调,您是指函数的最后一行使用setTimeout(...,newInterval)递归调用自身吗?
马克

1
我认为那是他的意思。我只是尝试过,它似乎正在工作。多谢你们!
Joe Di Stefano,

2
只给出9个喜:) --t应该是t-- jsfiddle.net/albertjan/by5fd
albertjan 2012年

1
递归地执行此操作,是否会冒times太大的堆栈溢出错误的风险?
安德烈C.安德森

4
在这里很挑剔,但是我得说,这段代码很难阅读。如果要使用下一行大括号,则至少应使用4-8个空格的缩进,或者不要超过2个缩进。IMO 这个版本更容易阅读。还请注意tto 的重命名tick,这是我对“ t”应该代表的任何东西的最佳猜测。t是一个非常糟糕的变量名。
Braden Best

124

您可以使用匿名函数:

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);

5
好吧RozzA,我的答案发布于11年9月16日,user28958发布于13年8月22日,所以我将表示“感谢”!
尼克

12
为什么使用间隔,简单的超时会更好,而无需清除间隔。例如:jsfiddle.net/fgs5nwgn
A. Wolff

4
我坚持这个问题的内容。setTimeout当然可以工作
尼克

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);

4
谢谢-让我朝着正确的方向前进,以从事类似的工作。
庞斯上校

简单有效。谢谢!
小丑

18

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

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()

    }

我更喜欢这个答案,因为它实际上回答了OP(和我)的问题。setTimeout可能会受到延迟(100%使用cpu,使用其他脚本等),因为setInterval不受这些延迟的影响-使其对“实时”内容的优越性更高
RozzA 2013年

8
我有99%的把握肯定您的主张setInterval是错误的@RozzA-它仍然受到与其他JavaScript相同的延迟的影响,并且几乎每个浏览器都将setInterval限制为4ms。您是否有与此相关的帖子的链接?
gnarf 2014年

9

这是我这样做的方式,我使用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();

+1,我为自己的目的对其进行了少许修改,以便可以使用多个可变间隔-jsfiddle.net/h70mzvdq
达拉斯

还修改了set_interval功能,除非新的时间间隔比旧的还要小,以不启动新的执行..if (iv < this.iv) { clearInterval(this.timeout); this.start(false, iv); } else { this.iv = iv; }
达拉斯

9

一种更简单的方法是if在刷新的函数中有一条语句,并有一个控件来按固定的时间间隔执行命令。在以下示例中,我每2秒运行一次警报,间隔(intrv)可以动态更改...

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

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

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

我想要一个减速计时器的解决方案,该方案可以根据应用程序事件重置其速率。简单而完美地满足了这一需求。谢谢。
安德鲁·布朗

它很酷,但是它会在您不需要它的时候触发间隔……这也有点难以理解。由于这些原因,我个人更喜欢setTimeout。
Kokodoko

4

可以根据需要启动。超时是我用来保持最忙时间的方法。

我每小时需要一个小时来开始一个代码块。因此,这将从服务器启动开始,并每小时运行一次间隔。基本上,初始运行是在同一分钟内开始间隔。因此,从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()

在这里,我们第一次运行,然后每小时运行一次。


3

一个简单的答案是您不能更新已经创建的计时器的间隔。(setInterval/setTimer和只有两个功能clearInterval/clearTimer,因此拥有a timerId只能将其停用。)但是您可以采取一些解决方法。看看这个github回购


2

我也无法同步和更改setIntervals的速度,因此我将要发布一个问题。但是我想我已经找到了一种方法。因为我是一个初学者,所以它应该得到改善。因此,我很高兴阅读您对此的评论/评论。

<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>

如果您希望计数器在页面加载后开始增加,则调用put counter1()and counter2()in foo()before countingSpeed。否则,它需要speed毫秒才能执行。编辑:简短的答案。


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

不能再短了


1

我是javascript的初学者,在以前的答案中没有发现任何帮助(但有很多好主意)。
下面的这段代码加速(加速度> 1)或减速(加速度<1)。我希望它可以对某些人有所帮助:

function accelerate(yourfunction, timer, refresh, acceleration) {
    var new_timer = timer / acceleration;
    var refresh_init = refresh;//save this user defined value
    if (refresh < new_timer ){//avoid reseting the interval before it has produced anything.
        refresh = new_timer + 1 ;
    };
    var lastInter = setInterval(yourfunction, new_timer);
    console.log("timer:", new_timer);
    function stopLastInter() {
        clearInterval(lastInter);
        accelerate(yourfunction, new_timer, refresh_init, acceleration);
        console.log("refresh:", refresh);
    };
    setTimeout(stopLastInter, refresh);
}

与:

  • timer:setInterval初始值,以毫秒为单位(增加或减少)
  • refreshtimer计算新值之前的时间。这是步长
  • factor:旧timer值和下一个值之间的差距。这是台阶高度

1

新增功能:

// set Time interval
$("3000,18000").Multitimeout();

jQuery.fn.extend({
    Multitimeout: function () {
        var res = this.selector.split(",");
        $.each(res, function (index, val) { setTimeout(function () { 
            //...Call function
            temp();
        }, val); });
        return true;
    }
});

function temp()
{
    alert();
}

1

这是创建减速/加速间隔计时器的另一种方法。间隔乘以一个因子,直到超过总时间。

function setChangingInterval(callback, startInterval, factor, totalTime) {
    let remainingTime = totalTime;
    let interval = startInterval;

    const internalTimer = () => {
        remainingTime -= interval ;
        interval *= factor;
        if (remainingTime >= 0) {
            setTimeout(internalTimer, interval);
            callback();
        }
    };
    internalTimer();
}

0
var counter = 15;
var interval = setTimeout(function(){
    // your interval code here
    window.counter = dynamicValue;
    interval();
}, counter);

给我错误:Uncaught TypeError: interval is not a function但这行得通
Nabi KAZ

0

受以上内部回调的启发,我创建了一个函数,可以在几分钟内触发回调。如果将超时设置为6 000、15 000、30 000、60000之类的间隔,它将连续不断地调整间隔,以准确地过渡到系统时钟的下一分钟。

//Interval timer to trigger on even minute intervals
function setIntervalSynced(callback, intervalMs) {

    //Calculate time to next modulus timer event
    var betterInterval = function () {
        var d = new Date();
        var millis = (d.getMinutes() * 60 + d.getSeconds()) * 1000 + d.getMilliseconds();
        return intervalMs - millis % intervalMs;
    };

    //Internal callback
    var internalCallback = function () {
        return function () {
            setTimeout(internalCallback, betterInterval());
            callback();
        }
    }();

    //Initial call to start internal callback
    setTimeout(internalCallback, betterInterval());
};
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.