在 SetInterval 运行时更改其间隔

小开

最佳答案

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

小开

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

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

小开

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

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


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

小开

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

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

小开

var counter = 15;
var interval = function() {
setTimeout(function(){
// Write your code here and remove console.log, remember that you need declare yourDynamicValue and give it a value
console.log((new Date()).getTime())


window.counter = yourDynamicValue;
window.interval();
}, counter);
}

//它只需以 init 方式运行一次

interval();

小开

我有同样的问题作为原来的海报，这样做作为一个解决方案。不知道这样有没有效率。

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

小开

我不能同步和改变我的 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毫秒。编辑: 简短的回答。

小开

这是我的方法，我使用 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();

小开

这可以按照您希望的方式启动。超时是我用来让它保持在最高点的方法。

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

这里我们有这个运行的第一次，然后每小时。

小开

下面这段代码加速(加速度 > 1)或减速(加速度 < 1)一个 setInterval函数:

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

配合:

以 ms 为单位的 setInterval 初始值(增加或减少)
refresh: 计算新值 timer之前的时间。这是步长
acceleration: 旧值和下一个 timer值之间的间隔。这是 台阶高度

小开

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

不能再短了

小开

创造新的功能:

// 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();
}

小开

这里还有另一种创建减速/加速间隔计时器的方法。间隔乘以一个因子，直到超过总时间为止。

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

小开

受到上面的 内部回调的启发，我做了一个在几分钟内触发回调的函数。如果超时设置为6000、15000、30000、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());
};

小开

您可以使用一个变量并更改该变量。

setInterval(() => function, variable)

小开

这是我的想法时，你不希望像 setInterval这样的循环重叠。
您还希望能够设置循环执行延迟，并立即启动和停止循环。
我使用的是 loop_flag变量和 setTimeout函数。
我将 main 函数设置为 async，这样您就可以通过调用 await来调用主体中的其他函数。当代码的主体正在运行时，主循环等待并且不重复自身。(setInterval的情况并非如此)

一个简单代码的例子是:

//@NabiKAZ


document.getElementById("btn_start").addEventListener("click", function() {
console.log("Starting...");
loop_flag = true;
loop_func();
});
document.getElementById("btn_stop").addEventListener("click", function() {
console.log("Stoping...");
loop_flag = false;
});


var n = 0;


var loop_flag = false;
var loop_func = async function() {
if (!loop_flag) {
console.log("STOP.");
return;
}


//body main function inhere
n++;
console.log(n);
////




if (loop_flag) {
setTimeout(loop_func, document.getElementById("inp_delay").value);
} else {
console.log("STOP.");
}
}

<input id="inp_delay" value="1000">
<button id="btn_start">START</button>
<button id="btn_stop">STOP</button>

有关循环中包含获取请求的更完整代码，请参见此处:

Https://jsfiddle.net/nabikaz/a5hdw2bo/

小开

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

例如:

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>