実行中にSetIntervalの間隔を変更する
SetIntervalを使用して、特定の反復回数で10秒ごとに文字列を操作するJavaScript関数を作成しました。
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に等しいように見えました。
それでは、匿名関数が実行されるたびに間隔を調整するにはどうすればよいですか？
代わりに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);
無名関数を使用できます：
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);
私はこの質問が好きです-私の小さなタイマーオブジェクトに触発されました：
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);
元のポスターと同じ質問がありましたが、これを解決策として行いました。これがどれほど効率的かはわからない....
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()
}
これはこれを行う私の方法です、私は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();
より簡単な方法は、更新された関数にifステートメントを使用し、定期的にコマンドを実行するコントロールを使用することです。次の例では、2秒ごとにアラートを実行し、間隔（intrv）を動的に変更できます...
var i=1;
var intrv=2; // << control this variable
var refreshId = setInterval(function() {
if(!(i%intrv)) {
alert('run!');
}
i++;
}, 1000);
簡単な答えは、既に作成されたタイマーの間隔を更新することはできません。 （2つの関数setInterval/setTimerとclearInterval/clearTimerしかありません。そのため、timerIdを使用して非アクティブ化することしかできません。）しかし、いくつかの回避策を講じることができます。 this github repo をご覧ください。
これは必要に応じて開始できます。タイムアウトは、時間の一番上に維持するために使用した方法です。
1時間ごとにコードブロックを開始する必要がありました。そのため、これはサーバーの起動時に開始され、間隔を1時間ごとに実行します。基本的に、最初の実行は同じ分以内に間隔を開始することです。そのため、initから1秒以内に、すぐに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時間ごとに実行します。
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>
ページがロードされた後にカウンターを増加させたい場合は、countingSpeedが呼び出される前に、counter1()にcounter2()およびfoo()を入れてください。それ以外の場合、実行前にspeedミリ秒かかります。編集：短い答え。
減速/加速間隔タイマーを作成する別の方法を次に示します。合計時間が経過するまで、間隔に係数が乗算されます。
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();
}
私は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初期値（増加または減少）refresh：timerの新しい値が計算されるまでの時間。これはstep lenghtですfactor：古い値と次のtimer値の間のギャップ。これはstep heightです
(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();
}
var counter = 15;
var interval = setTimeout(function(){
// your interval code here
window.counter = dynamicValue;
interval();
}, counter);