setIntervalの間隔を途中で変更できますか

質問

jQueryを使って、画像にマウスオーバーしたら、画像のsrc値を切り替えて、あたかもパタパタ回っているような処理を加えています。
setIntervalを使って50msごとに切り替えています。
この50msを途中で例えば30msとか200msに変更することは可能でしょうか。

途中で回転速度を変えたい場合、どのような作法がありますか。

回答No.2

yambejp · ベストアンサー

よく考えたらsetTimeoutではなくsetIntervalなので前回の記述は
完全におかしいですね、申し訳ないです
おっしゃるとおり、クリアして再実行で良いかと思います

<script>
var c=1;
var timer;
doTimer(1000);
function doTimer(t){
if(timer) clearInterval(timer);
timer=setInterval(function(){document.getElementById("test").innerHTML=c++;},t);
}
</script>
<div id="test"></div>
<input type="button" value="t=30" onclick="doTimer(30);"><br>
<input type="button" value="t=50" onclick="doTimer(50);"><br>
<input type="button" value="t=200" onclick="doTimer(200);"><br>
<input type="button" value="t=1000" onclick="doTimer(1000);"><br>

お礼

ご丁寧に補足頂きありがとうございます！

回答No.3

b0a0a

そういうときはsetTimeoutを使う
いちいちclearするとか変

お礼

あ、そうなんですね。勉強になります。どうもです。

回答No.1

yambejp

1ミリ秒でまわして、カウンタの処理をいれてみては？

<script>
var c=1;
var t=1000;
var counter=0;
var timer=setInterval(function(){if(counter==0){document.getElementById("test").innerHTML=c++;};counter=counter<t?counter+1:0;},1);
</script>
<div id="test"></div>
<input type="button" value="t=30" onclick="t=30"><br>
<input type="button" value="t=50" onclick="t=50"><br>
<input type="button" value="t=200" onclick="t=200"><br>
<input type="button" value="t=1000" onclick="t=1000"><br>

お礼

センスのないロジックになってしまいそうですが、カウンタを回して、一定値に達したら、現在動いているsetIntervalをclearして、インターバル値を広げたsetIntervalを発動させてみます。

アドバイスありがとうございます！