• ベストアンサー

setTimeOutとsetInterval、どっちが良いのか

最近、あらゆるところで動的なアニメーションを見ます。 例えば情報を表示するのにイーズイン・イーズアウトしたり画像をフェードさせたりといった視覚効果上のアクセント的に使われるものです。 これらはほんの短い間だけsetTimeOutかsetIntervalで関数を何度も実行して実現させていますが、この両者はどちらの方が優れているのでしょうか? プロのサイト数箇所でソースを覗いてみましたが、なぜかどこもsetTimeOutを使っていました。setIntervalではいけない理由があるのでしょうか?自分で実験してみたところ、両者に処理速度の差はほとんど見られませんでした(そのごくわずかな違いについて言えばいつもせtTimeOutが勝ちますが)。

質問者が選んだベストアンサー

  • ベストアンサー
  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

setTimeoutで正解です。 setTimeoutはスタックやランタイムを考慮します。 setInterval はそんなことには無関係に杓子定規に指定時間間隔で 処理を機械的にします。 なので、重い処理だと、完了していないのに、時間切れで次の処理 を実行して大変な修羅場になります。

その他の回答 (1)

  • PED02744
  • ベストアンサー率40% (157/390)
回答No.2

目的が違うのです。 setTimeOut()は、指定された時間「待ってから」指定された動作を行う関数です。 setTimeInterval()は、指定された時間「間隔ごとに」指定された動作を行う関数です。 処理の開始を待ちたいのであれば「setTimeOut」を使いますし、 定周期で何回も同じ処理を繰り返したいのなら「setTimeInterval」を使います。

関連するQ&A

  • setTimeoutあるいはsetIntervalの限界

    いつもお世話になっています。 タイマーの実験をしてみようかと思い、タイマー関数のサンプルをちょっと触ってみて、気になることがありました。 スクリプトとしては、次のようなものです。 <HTML> <HEAD> <SCRIPT Language="JavaScript"> <!-- timerID = 10; count = 0; function timerX(){ status = "Counter is " + count++; } function clr(){ clearInterval(timerID); } // --> </SCRIPT> <BODY bgColor="white" onLoad="timerID = setInterval('timerX()',1000);"> (以下略) このスクリプトを実行すると、1秒毎に1カウント増えていきますから、ステータスに表示される数値は10秒で10になります。 ですから、1を指定する、つまりsetInterval('timerX()',1);にすれば、論理上、10秒で10000になるはずですよね? ところが実際にステータスに出る数値はそうはならず、かなり低い数字になってしまいます。 そこで質問なのですが、setTimeoutまたはsetIntervalでタイマーを作る場合、ミリ秒はどのくらいまで有効なのでしょうか。 ひょっとして、マシンに依存するのでまちまちなのでしょうか。 経験等でご存じの方、お教えください。

  • 直線のアニメーション

    初心者です。よろしくお願いします。 5センチくらいの直線が、0.5秒ごとに 0.5センチくらい下に1本ずつ増えていく アニメーションのコードを教えてもらえないでしょうか? setInterval(関数名, 時間); を使うのかな・・・とは思ってますが、 実現できません。。。

  • flashにてフェードアウトアニメーションのあるページ移行についての質

    flashにてフェードアウトアニメーションのあるページ移行についての質問です。 フルフラッシュサイトを勉強のしたいと思い挑戦しています。 page1からpage2への移動する際にメニューボタンを押すとpage1のフェードアウトのアニメーションが再生されて、 さらに、page2のフェードインアニメーションがされてpage2のコンテンツを表示する為にはどうすればよいかわかりません。 ・pageは複数 ・どのpageから移動するさいにもそのpage特有のフェードアウトアニメーション 上記の条件を満たす方法を模索しております。 http://www.square-enix.co.jp/hikarino4sensi/ のサイトのようなページ移行の実現が目標です。 よろしくお願いします。

  • suzukaでのアルファ値操作

    flash作成ソフトsuzukaについてのご質問です。 どなたかよろしくお願いいたします。 外部jpg画像をムービークリップに読み込み、 フェードイン後 30秒停止し、フェードアウトを 行いたいのですが、方法がわからずつまづいています。 setInterval関数 か setTimeout関数のどちらかを使うのだろうなと いうぐらいまでしかわからない程の知識です。 ご指導のほど、よろしくお願いいたします。 ---------------------------------------------- // このムービークリップが読み込まれたら onClipEvent (load) { // このアルファを 30 にする this._alpha = 30; } // 1フレーム進む時間ごとに毎回実行 onClipEvent (enterFrame) { // もしこの アルファ が 100 より小さいとき if (this._alpha<100) { // このアルファを 3 加算する this._alpha += 3; // それ以外の場合(アルファ100以上) } else { // このアルファを 100 で固定 this._alpha = 100; } } ------------------------------------------ 上記のスクリプトは問題なく動作します。 上記のスクリプトのアルファ値が100に到達してから 30秒後動作する下記の内容をプラスしたいのですが、 ----------------------------------------- // もしこの アルファ が 0 より大きいとき if (this._alpha>0) { // このアルファを 3 減算する this._alpha -= 3; // それ以外の場合(アルファ0以下) } else { // このアルファを 0 で固定 this._alpha =0;} ----------------------------------------- どなたかアドバイスをよろしくお願いいたします。

    • ベストアンサー
    • Flash
  • 複数の画像をフェードイン・アウトでランダム表示したい。 出来れば、画像がカブらない様にしたい。

    始めまして、初歩的な質問で申し訳ないのですが、よろしくお願いします。 『9枚の画像(サイズはすべて同じ)を4箇所(2×2)でフェードイン・フェードアウト、する様な形で表示させたい。』 (1) 複数の画像をランダムで表示させる事は以下のリンク等で確認出来ました。 http://logue.apricotte.net/2006/04/03-192500.php (2) フェードイン・アウトは=<a http://iswebmag.hp.infoseek.co.jp/142/sample02.htmlこちらを参考に出来ました。 ※1箇所のみで出来ました! 2箇所以上だと、ダメです。 (1)だけだとフェード効果を得られません。 (2)は1箇所配置だけど動作しますが2箇所以上に配置だと動作しません。 (3)出来れば(1)のように画像を配置したい箇所に記述出来るソースがあれば幸いです。 以上、聞き苦しい点があると思いますが、よろしくお願いします。

  • 画像のフェードインについて

    最近javascriptでいろいろなことができることを知りました。 WEBを調べていたら、画像のフェードインのソースを見つけて、 そのソースの意味を調べていましたら、今まで見たことのない 表記が出てきました。再起処理の中に"+img+"とうのがありますが これはどういう意味なのかなと、理解できません。+imgとかimg+ と表記されていた場合は、前の画像に新しい画像を足していくの かなと想像してしまいますが、果たしてその解釈も正しいものやら 想像の範囲でしかありませんが・・・。javascriptに詳しい方、 +img+の意味を是非ご教授お願いいたします。javascriptは、 数日前に本を読み始めたばかりの初心者です。バカな質問と思わ れるかもしれませんが宜しくお願いいたします。 <!-- // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔(ミリ秒単位) ntc = 2; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd); } // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } //-->

  • Windowsのシグナルでalarm()の代用方法を教えてください

    UNIX の signal を使ったソースを Windows に変更したいのですが、Windows には alarm() 関数が用意されておらず、タイムアウトをかけることができません。 どのように実現させたらよろしいでしょうか?

  • ActionScriptで、指定した時間後に次のアクションのとり方

    例えば2秒後に次の行動を取りたい時の質問をしたいのですが、 ある画像を下からフェードインしながら現れて、停止し2秒後にフェードアウトするというアニメーションをActionnScriptで作りたいのですが、 現在は下記のようにスクリプトを組んで、下から上にフェードインしながら画像を読み込むところまではできたのですが次の2秒後にフェードアウトするというのができません。 setIntervalを使うといいのは知っているのですが、それを下記のスクリプトにどのように組んだらできるのでしょうか? わかる方がいたら教えてください、よろしくお願いします。 swfのサイズはw:300、h:100です、ステージにMovieClipを一つ置いてそれに下記のスクリプトを書き込んでいます。 ------------------------------------------------------------------- onClipEvent (load) { this.createEmptyMovieClip("img_load_mc",1); img_load_mc.loadMovie("画像URL"); this._alpha = 0; this._x = 0; this._y = 100; } onClipEvent (enterFrame) { this._alpha += 5; this._y -= 5; if(this._y <0) { this._y = 0; } } ------------------------------------------------------------------- ちなみに作成環境はFlash8 ProでActionScript2.0で作成しています。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • 200ページ以上を1つのswfで制作すると、どうなってしまうのでしょう?

    ただいま200ページ以上のフルFlashサイトを制作しております。 クライアントさんの要望で、 ページ切り替え時はフェードイン・フェードアウトしながら、 そしてできる限りシームレスに(now loadingなどの表示が入らないように) してください、といわれ、どうしたものか、と思い、 仕方がないので、 1M/bps以上の速度がでるブロードバンド環境下において、 シームレスなムービーを実現させたいと考えております。 「now loading」等の表示をさせないためには、ストリーミング再生を利用するしかないと思いました。 そして「シーンの切り替え」「タイムラインレイヤー」を効率よく使い、なんとかディレクトリ構造らしきものを組み立てるしかないかと。 ただこの場合も、Flashのストリーミングは下から順番に直線的に読み込まれるので、いくらブロードバンドとはいえ、 読み込み順序が後の方のページに、突然(まだ読み込まれてないのに)アクセスされたらどうなるのだろう…?と不安です。 swfを分けて、メインswf内部に別のswfを読み込む、という方法も考えてみたのですが、この場合だとストリーミングができず、ページ切り替え時のフェードイン・フェードアウトがぎこちなくなってしまうように思えます。 そんなわけで、なにかほかによい制作方法はないものでしょうか? 条件をまとめますと、下記になります。 ・1M/bps以上の速度がでるブロードバンド環境において ・200ページ分の量 ・「now loading」を入れずにシームレスに動かす ・ページ切り替え時はフェードイン・フェードアウトなどのムービーをつける よいアイディアや知識をお持ちの方、ご一報頂ければ幸いです。 どうぞよろしくお願い致します。

    • ベストアンサー
    • Flash
  • 画像の下のテキストにフェードアウト後入力したい

    フェードインした画像の下にテキストボックスがあり画像フェードアウト後にそのテキストに 入力したいのですができません。 フェードアウト後に優先順位などを変更するなどの回避策はありますか? 今の状態を簡素にしたもののソースを記載します。 ----- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><test>画像優先順位変更</TITLE> <!-- saved from url=(0014)about:internet --> <Script Language="JavaScript"> moveTo(30,30); resizeTo(1050,750); // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔(ミリ秒単位) ntc = 5; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd);} // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } </SCRIPT> </HEAD> <BODY onload="fdInImg('1gif')"> <IMG SRC="1.gif" name="1gif" border="0" style="top:30;left:100;filter:alpha(opacity=0);position:absolute"> <Input type="button" onclick="fdOutImg('1gif')" value="FdOut"> <table> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> </table> </BODY> </HTML> ------------------

専門家に質問してみよう