人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで配列の中身を1つずつ順番に待機時間を挟んで表示させようとトライしています。例えば配列の1つ目を表示させる。2秒後に2つ目を別の場所に表示させる。次に2秒後に、これら2つを消して、あとはこの繰り返し(表示→消す→表示→消す、、、)
このとき、配列の中身の数だけ繰り返すためにfor 文をいれたのですが、うまくいきません。2秒の待機時間があるからでしょうか?
どこが原因なのか、是非教えてください。宜しくお願いします。
jsfiddleにコードを書きました。
https://jsfiddle.net/zcLytacv/

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ぽけっとしすてむ
ベストアンサー

現在のコードでは

  1. ループを開始する
  2. それぞれのタイマーを3回呼び出す
  3. iの値が3になり、ループを抜ける
  4. data[3] (4の内容)、data[3+1] (5の内容)を3度表示させる
  5. setTimeoutにより文字が消える

という挙動になっています。

書くタイミングと消すタイミングを分けて考えると良いでしょう。

※一例となります。
q.hatena.ne.jp/1498712865 - JSFiddle


kajironpuさんのコメント
ありがとうございます! もう少し教えてください。for のループを開始したあとで、 待機時間が2秒と長いために、3回表示される前にループが終わってしまうのでしょうか? 、

ぽけっとしすてむさんのコメント
例えば、 >|javascript| setTimeout(step0,2000); ||< の秒数をゼロと指定しても、(多くは)回答で示した通りの順序で表示されます。 これは、setTimeoutよりも先にforループが処理されるためです。 質問にあるコードを少し変更して、動作が分かるようにしてみましょう。 >|javascript| var data=[1,2,3,4,5,6] for (var i = 0; i < data.length/2; i++){ console.log(i); setTimeout(step0,0); function step0(){ console.log('disp a',data[i]); document.getElementById("a").textContent = data[i]; setTimeout(step1,2000); } function step1(){ console.log('disp b',data[i+1]); document.getElementById("b").textContent = data[i+1]; setTimeout(step2,2000); } function step2(){ document.getElementById("a").textContent = ""; document.getElementById("b").textContent = ""; } } console.log('loop end'); ||< 実行結果はこのようになります。(Google Chrome) >> 0 1 2 loop end disp a 4 disp a 4 disp a 4 disp b 5 disp b 5 disp b 5 <<

kajironpuさんのコメント
なるほど、、詳しいご説明ありがとうございます。 つまり、setTimeoutなどで待機時間を入れたい場合は、繰り返し処理はfor は使えないということになるのですね。回数をカウントさせるなどの別のやり方になるんですね。勉強になりました。ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ