JavaScriptで一定時間後にsetIntervalでループ処理を行う方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptで一定時間後にsetIntervalでループ処理を行う方法について紹介します。
  • 質問者は、setTimeout()内にsetInterval()を含めてループ処理を行いたいと考えていますが、正しく実行されないようです。
  • ほかの方法としては、クロージャを使用して問題を解決することができるかもしれません。
回答を見る
  • ベストアンサー

一定時間後にsetIntervalでループ処理を行うにはどうしたらいい

一定時間後にsetIntervalでループ処理を行うにはどうしたらいいのでしょうか。 JavaScriptにwait関数があれば早いのですが、setTimeout（）のなかに入れ込むしか思いつきません。 forやwhile等で空ループさせて終了後に実行という方法も考えましたが、CPUに余計な負荷がかかるみたいでこれは避けたいです。 具体的には次のようなことがしたいと思っています。 function(a,b,c){ setTimeout(function(){ setInterval(function(){} ,10 ) },c) しかしこれだと再下段の関数が実行されないようです。またループ処理は可能な限りsetInterval()にさせたいと思っています。クロージャで解決できるんでしょうか。何か良い方法がありましたらお願いします。

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

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.1

> しかしこれだと再下段の関数が実行されないようです。 掲示されたコードは SyntaxError が出るはずなんですが、エラーコンソールを確認していますか？ おそらく、エラーを解消するだけで期待通りに動作します。 # 前質問もそうでしたが、せめてエラーコンソールでエラーが出ない状態にしましょうよ…。

neglectiii
質問者

お礼

ありがとうございます。 焦って充分確認もせずに書き込んでしまっていました。書き込み後に慌てて確認したところエラーがあり，動作しました。おっしゃるとおりですね、まだ初心者で慣れていないのですがエラーコンソールをチェックする習慣をつけます。 ご迷惑おかけ致しまして申し訳ございませんでした。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 一定時間まちたい

    setInterval() とか setTimeout は関数を指定したりしないといけないですが、 ただ単に、一定時間、処理を中断して、 一定時間後、処理を再開するには どうすればいいですか そういう命令ありますか？

  • 即時関数で

    即時関数（無名関数）でsetTimeoutを繰り返す方法はありますでしょうか？setIntervalではなく。 var testDo=function(){ setTimeout(function(){ 何かの処理 testDo(); //★実行されない },600); }(); //即時関数 即時なのでtestDoという名前も不要だと思いますが。。。 よろしくお願いします。

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

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

  • PHPのプログラム中に一定時間処理を待ちたい場合

    例えばwhileループがあったとし、下記のように５秒などまってから処理関数に入るように作りたいのですが、何かいい方法はないでしょうか？ while($i!=1){ 処理待ち関数 処理関数 }

    • ベストアンサー
    • PHP
  • 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でタイマーを作る場合、ミリ秒はどのくらいまで有効なのでしょうか。 ひょっとして、マシンに依存するのでまちまちなのでしょうか。 経験等でご存じの方、お教えください。

  • 一定時間処理待ちするコード

    1つのファンクションの中で3つのまとまりの処理を行っています。 便宜上処理A,処理B,処理Cとします。 A処理は普通に処理します。 B処理では部分的に処理待ちを行いたい。 C処理は、B処理が終わってから処理を行いたい。 現在は、B処理のメソッドの中でsetTimeoutを使用して処理待ちを行っています。が、言うまでもないことですが、このままではB処理を待たずにC処理を行ってしまいます。 それではと、C処理のグループをファンクションにしてしまい、そのファンクションの呼び出しをB処理の待ち時間と同じかそれより少し長く待つようにすれば実現すると思うのですが、あまりにも美しくないと思っています。 純粋に処理を待つという処理をしたいと思っています。 昔はfor文でぶん回すという方法もありましたがCPUを使いすぎるのでやりたくありません。 何かうまい方法はありませんでしょうか。 よろしくお願いします。

  • 表記する処理の後に消す処理を繰り返したい

    テキストのみのスライドショーを作りたいのですが、setinterval2秒後に隠していたテキストをふわっと出してそのさらに二秒後に消して、それと同時に次のテキストを出すというようにしたいです。 始めテキストをすべてhiddenで消しておいて、二秒後にvisibleで上書きして表記するというのはわかるのですが、その後さらに二秒後に消す方法がわかりません。 合計で4秒になるので4秒後に消すsetintervalを下記の下に作成しそこで同じようにループ処理を記載してhiddenで上書きすればよいのでしょうか？ https://codepen.io/anon/pen/WOroYo setInterval( function () { 表記する処理 }, 2000); が終わったら次の setInterval( function () { 消す処理 }, 2000); を実行とする方法はあるのでしょうか？

  • JavascriptでsetInterval()

    JavascriptでsetInterval()を指定時間後に実行したいのですが、方法が分かりません。 Javascriptは別ファイルになっています。 <div id=header_ko> <img src="data/ball.gif" name="ball" style="position:relative;left:100px;top:15px;" onclick="setInterval('moveBall()',25)"> </div> //ボールを右に少しずつ動かします。 //ＪＳファイルは外部にあり、呼び出します x=100; y=1; function moveBall() { if(x<775){ x+=y; document.ball.style.left=x; } } //xが７７４のところまで、行ったら、ボールの動きが止まります。 ボールが止まってもプログラムは動いていると聞いて、 setInterval()を使用して、プログラムの上でも停止させたいのですが、 方法が分かりません。 Javascript初心者です。 宜しくお願いいたします。

  • DOSコマンドでの単純なループ処理

    DOSコマンドで単純なループ処理を記述する方法を教えて下さい。 UNIXで下記のようにwhileコマンドを使用すると、 /export% While(1) ? ループ処理で実行させたいコマンドを記述 ? echo "" ? sleep 3 3秒おきにコマンドの標準出力が表示されます。 Windowsで同じようなことができたらいいなと 思うのですが、簡単な方法を知っている方がいたら 教えて下さい。

  • アニメーションをループさせたい

    すみませんjquery初心者です。 下記の様な簡単なスライドショーを作りたいのですが、 ---------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script> <script> setTimeout(function() { $(".slide01").hide(); $(".slide02").show(); }, 3000); setTimeout(function() { $(".slide02").hide(); $(".slide03").show(); }, 6000); setTimeout(function() { $(".slide03").fadeOut(2000); $(".slide04").fadeIn(2000); }, 9000); setTimeout(function() { $(".slide04").fadeOut(2000); $(".slide01").fadeIn(2000); }, 15000); </script> <style> p.slide01, p.slide02, p.slide03, p.slide04 { position: absolute; } </style> <div class="slide"> <p class="slide01"><img src="images/image01.jpg" alt="" /></p> <p class="slide02" style="display:none;"><img src="images/image02.jpg" alt="" /></p> <p class="slide03" style="display:none;"><img src="images/image03.jpg" alt="" /></p> <p class="slide04" style="display:none;"><img src="images/image04.jpg" alt="" /></p> </div> ---------------------------------------------------------------- 下記の様にループさせようとすると何やら挙動がおかしくなってしまいます。。 ---------------------------------------------------------------- setInterval( function () { setTimeout(function() { $(".slide01").hide(); $(".slide02").show(); }, 3000); setTimeout(function() { $(".slide02").hide(); $(".slide03").show(); }, 6000); setTimeout(function() { $(".slide03").fadeOut(2000); $(".slide04").fadeIn(2000); }, 9000); setTimeout(function() { $(".slide04").fadeOut(2000); $(".slide01").fadeIn(2000); }, 15000); },0); ---------------------------------------------------------------- どのようにすればループさせることが出来るのでしょうか？ ご教授頂けると非常に助かります。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する