AX
JavaScriptでwaitする方法
〜戯れ言〜
HTML文書を書いてて、文字を点滅させたかったんで、blinkタグを使ってみた。
ところが、blinkタグはNetscape専用らしく、SafariでもInternetExplorerでも動かない。

となると、JavaScriptで書くしかない。
まぁ、大して複雑な処理じゃない。ただ、文字を点滅させるだけですからね。

つまりは、文字を見えなくしたり、見えるようにしたり、という処理を繰り返すJavaScriptを作れば良い。
方法としては、点滅させたい文字を

(1)削除する → 表示する → 削除する →・・・・
(2)背景と同じ色にする → 背景と違う色にする → 背景と同じ色にする →・・・・
(3)透明にする → 不透明にする → 透明にする →・・・・
(4)移動させる → 元の位置に戻す → 移動させる →・・・・

と、こんな感じに何通りかある。
(1)、(2)ならinnerHTMLとか使ってやるし、
(3)ならスタイルシートで透明度の設定を変える。
(4)もスタイルシートで表示する位置を変える処理を書けばいいわけだ。

んで、どの処理にも共通して必要なのが、繰り返しの処理。
しかもただ単にループすればいいってわけじゃない。
ある程度 時間をおいて繰り返してもらわなきゃ、速過ぎて常に表示して見えてしまう。

で、その時間を開ける方法を考える。
C言語にはsleep()という関数が存在し、引数として数字を与えてやれば、
その与えた時間だけ処理が止まる。

例えば、sleep(1000)なら1秒処理が止まってくれる。

Javaにも似たようなものがあり、wait()というメソッドが存在する。同じようにwait(1000)のようにして使う。

だが、JavaScriptにはそのような便利なファンクションが存在しない。
でも、似たような物はある。それがsetTimeout()というファンクションである。

setTimeout()は引数に”行ないたい処理”と”その処理を行なうまでの時間”を設定する。

setTimeout ("alert ('1秒待ちました')",1000)

ってな書き方をすると、1秒後に、アラートで「1秒待ちました」のメッセージが出る。

今回の場合は、繰り返しの処理なので、再起処理のようなことをしなければならないのですが、実はJavaScriptにはもう1つ似たようなファンクションがあり、setInterval()というものがある。

setInterval()はあまり知られていないのか、それともあまり使わない方がいいファンクションなのか、あまりサイトで使われているところを見かけない。どこもsetTimeout()を再起的に呼び出している。

ま、我が輩はそんなこと知ったこっちゃない。今回はこっちの方が、便利なのでこれを使う。
setInterval()は繰り返し処理を呼び出すファンクションである。
使い方はsetTimeout()とほとんど同じ。

s etInterval ("alert ('10秒経ちました')",10000)

このように書けば、アラートで10秒ごとに「10秒経ちました」のメッセージが出る。ここで、繰り返し呼ぶまでの時間の設定を小さくしすぎると、ハマってしまうので注意。

ってなわけで、不透明ならば透明にし、透明ならば不透明にするという処理をするblink()という名前のファンクションを作り、

s etInterval ("blink ()",10000)

ってな感じで完成。
setTimeout()を使ってちょっと工夫すれば、単純に一定間隔で点滅するものだけじゃなく、三三七拍子で点滅させるファンクションなんてものも作れる。

ちなみに今回 blink()ファンクションの中身(ソース)や三三七拍子の作り方を書いていないのは、ただ自分用にJavaScriptのwaitの仕方をメモしておきたかっただけで必要ないからである。

たまにはこういう使い方もいいかなぁ〜、なんて。φ(。_。)メモメモ


2009/12/19 追記
【Javascript】 JavaScriptでwaitする方法 改

waitのfunctionを使えばblinkはこうやったらできる。

function blink() {
var b = document .getElementById("blinker");
if (b.style.display!="none") b.style.display="none";
else b.style.display="inline";
wait(1000);
blink();
}

[PR]
by manodeldio | 2005-10-23 23:43 | 雑記


<< 新Mac Power Mac ... すげぇ・・・。orz >>