javascript:setintervalで一回目だけ秒数を早くしたい

Question

var timer = setInterval(function() {
  //1000ミリ秒ごとに消えたり表示したりする処理
}, 2000);

上記の感じで1秒かけて消え、1秒かけて表示という点滅を実現したとします。
その場合、たとえば要素にマウスオーバーしたら上記の
setintervalが始まるとした場合、マウスオーバーしてから
1秒待たないと動きが始まりません。

最初の一回だけ100ミリ秒とかにして
以降は上記のとおり1秒間隔で点滅を実現するには
どうしたらよいでしょうか？

Answer 1

点滅だけならcssアニメーションはダメなのですか？
ディレイもかけれるので楽ですよ。
jsfiddle

Comments

[miyabi-sun]

HTMLの要素に限定されそうですが良い回答だと思ったので＋１入れました。
例えば特定の要素を点滅モード、常に消灯をJSでコントロールしたければ
点滅するクラスを付与したり削除したりといった方法で実現出来ますね。

[namnium1125]

操作がhoverということも考慮するとこの方が簡潔に書けていいですよね。

[miyabi-sun]

質問文のhover見落としてました、間違いなくこっちのがいいですね。

[cheche0830]

ありがとうございます。その方法もありましたね！試してみます！

Answer 2

setIntervalで関数を包むのをやめましょう。
最初の1回目が100ms遅延でなく0ms即時発火でよければこれで動作します。

var blink = function() {
  //1000ミリ秒ごとに消えたり表示したりする処理
}
var timer = setInterval(blink, 2000);
setTimeout(blink, 0);

100ms遅延から、以降2000ms遅延にしたければこんな感じですかね。
コードはちょっと変？許容範囲？

var timer;
var blink = function() {
  //1000ミリ秒ごとに消えたり表示したりする処理
}
setTimeout(function(){
  timer = setInterval(blink, 2000);
  blink();
}, 100);

Comments

[cheche0830]

ほぉ。。。こんな書き方があるんですね。試してみます！
ありがとうございました！

Answer 3

即時実行

「setIntervalには無名関数を指定する」という思い込みが自由な発想を邪魔しているように思います。

function foo () {
  // 1000ミリ秒ごとに消えたり表示したりする処理
}

foo(); // 即時実行する
var timerId = setInterval(foo, 1000); // 1000ms毎に実行する

100ms後に実行

名前付き関数式は内部に関数名のスコープを持ちます。

setTimeout(function foo () {
  // 1000ミリ秒ごとに消えたり表示したりする処理

  setTimeout(foo, 1000);
}, 100);

Re: cheche0830 さん