ここから本文です

JavaScriptで、setIntervalで実行する処理を3回繰り返すにはどうしたらよいでしょ...

kiy********さん

2019/5/1614:26:22

JavaScriptで、setIntervalで実行する処理を3回繰り返すにはどうしたらよいでしょうか。
お世話になります。

setIntervalで実行する処理を繰り返す方法をお教えいただけると助かります。次は関数funcを0.1秒間隔で実行し、iが100を超えたら終了。またiを0にして、これを繰り返すという内容ですが、繰り返さずに終わってしまいます。
どのように修正すればよろしいでしょうか。

for(kai=1;kai<=3;kai++){
i=0;
my_int=setInterval("func()",100);
}

function func(){
・・・
i++;
if(i>=100){
clearInterval(my_int);
}
}

お手数をおかけして申し訳ございません。何卒よろしくお願いいたします。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
41
回答数:
4
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

リクエストマッチ

2019/5/1619:35:49

setInterval() を for() ループで回すと、
1回目の setInterval() が終了するのを待たずに
2回目、3回目の setInterval() も同時に実行されるんで、
くり返さずに終わっているのではなく、3つ同時に走っている。
i を加算する処理が3つ同時に走るんで、
i が 100 に達するのも通常より早いはず。

1回目の setInterval() が終了したときに
2回目の setInterval() を開始、
2回目の setInterval() が終了したときに
3回目の setInterval() を開始、
としたいのなら、
for() ループなど使わずに、その通りに処理を書けばいいだけ。

────────────────
var i = 0;
var count = 0;
var tmr = setInterval( func, 100 );

function func(){
console.log( i ); // コンソールで進行を確認
if( ++i > 100 ){
clearInterval( tmr );
if( ++count < 3 ){ i = 0; tmr = setInterval( func, 100 ) }
}
}
────────────────

なお、
setinterval() で実行する処理を、

────────────────
setInterval( "func()", 100 );
────────────────

のように文字列で記述するのは、
もう化石のように古い時代の書き方で、
もう何年も前から推奨されておらず、
5年以上も前からいい加減やめろと言われている書き方なんでやめる。
setInterval() の第一引数には、
ちゃんと関数オブジェクトの参照を渡すこと。

────────────────
setInterval( func, 100 );
────────────────

  • ois********さん

    2019/5/1621:48:17

    別のやり方。
    setInterval() 自体を 関数 func の中にいれてしまう。
    関数 func の中で setInterval() を実行し、
    i が 100 まで行ったところで変数 count の値をチェック。
    count を +1 した結果が 3 になるまで、
    func( count ) を再帰的に実行。
    こっちの方が、やり方としては素直かな。

    ────────────────
    // 加算する変数
    var i = 0

    // count が 3 になるまで setInterval() を繰り返す関数
    function func( count ){
    var tmr = setTimeout( function(){
    console.log( i );
    if( ++i > 100 ){
    clearInterval( tmr );
    if( ++count < 3 ){ i = 0; func( count ) }
    }
    } );
    }

    // 開始
    func( 0 );
    ────────────────

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2019/5/17 23:50:23

貴重なアドバイスをたくさんいただき感謝しております。
どうか、今後ともよろしくお願いいたします。
ありがとうございました。

ベストアンサー以外の回答

1〜3件/3件中

並び替え:回答日時の
新しい順
|古い順

プロフィール画像

カテゴリマスター

leg********さん

リクエストマッチ

2019/5/1703:22:52

setIntervalで実行する処理を繰り返す方法

あきらかな間違いは、forループの中でsetIntervalで実行していること。
それでは、複数のタイマーが動いてしまいます。

まったくの間違いではないけれども、
タイマーコードの、あるある表記が気になります。

解説本などでも、平気で書いているコードが、これ。
・setInterval("func()",100);
・setInterval(func(),100);

正しくは、こうです。
・setInterval(func,100);

つまり、引用符もカッコも付けないのです。

さて、setIntervalを用いたプログラムの条件は、

1. 関数 funcを0.1秒間隔で実行し、iが100を超えたら終了。
2. また iを0にして、これを3回繰り返す。

私の開発コンセプトは、次のとおりになります。

・繰り返し回数を、変数 Kai=3 にセットする
・0.1秒 (100ミリ秒)ごとに、変数 iをインクリメントする
・iが100を超えたら、i=0 にリセットし、変数 Kaiをデクリメントする
・変数 Kai=0 に到達した時点で一連の処理を完了する

サンプルを試作してみました。

<button id="btn">START</button>

<script>
(function(){

//変数宣言
var kai = 3; //繰り返す回数
var my_int; //タイマー
var i; //ループカウンター

function func(){

if(100 < i){
clearInterval(my_int); //タイマー終了
kai--;

if(0 < kai){
task();
}

}

console.log( i, kai );
i++;

}

function task(){
i = 0; //初期値設定
my_int = setInterval(func, 100); //タイマー実行
}

btn.onclick = task;

})();
</script>

開始ボタンをクリックしてから、
コンソールログを見ていると、動きがつぶさにわかります。

どうぞ、おためしになってみてください。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

プロフィール画像

カテゴリマスター

sii********さん

リクエストマッチ

2019/5/1619:41:49

https://jsfiddle.net/nwka0je5/

・すべての変数は宣言を忘れずに。

・タイマーのループに条件を付ける場合は、setTimeoutを再帰的に回していくという方法もあります。

・setTimeoutやsetIntervalの第一引数には、「関数を実行する文字列」ではなく「関数そのもの」を渡すようにしましょう。前者は、直ちに捨てるべき古い書き方です。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

プロフィール画像

カテゴリマスター

glo********さん

リクエストマッチ

2019/5/1618:12:08

for文など使わず単純に
「i とは別のカウンタ」となる変数を作れば良いと思いますよ。

「i とは別のカウンタ」となる変数など
他と名前が被らなければ何でも良いですが
仮に「cnt」にするとしましょうか。

その場合のコード例(HTML全文例)です↓。



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<input type="text" id="my_txt">
<script>

var my_int = setInterval("func()",100);
var cnt = 0;
var i = 0;

function func(){
    document.querySelector("#my_txt").value = i;
    i++;
    if(i > 100){
        i = 0;
        cnt++;
        if(cnt > 3){
            clearInterval(my_int);
        }
    }
}

</script>
</body>
</html>

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる