スライドショーなどずっと繰り返す処理

質問

https://okwave.jp/qa/q9339175.html
の続き

スライドショーなどずっと繰り返す処理ってよくありますよね。
その様な場合配列のインデクス番号を初期化してやらないと、一度画像を回って最後のがぞうで止まってしまうと思うのですが、
また繰り返すためにはどうすればいいのでしょうか？

初期化すると必然的に無限ループになりませんか？
教えていただけませんでしょうか？

回答No.4

shimix

私が

>無限ループにしないと繰り返しませんけど・・・

と書いたのは

>初期化すると必然的に無限ループになりませんか？

を受けての話です（そうなっていますよね）。インデックスの値を増分していって、最大値を超えたら初期値に戻すので「無限ループ」はします。それはあくまでもJavaScript全体の処理としてそういうロジックになるということです。

質問者さんは最大値で終了せずに初期値に戻したら無限ループになりませんか？と心配されていましたよね。この時点でsetTImeoutで繰り返す処理というのが大前提であって、forで回すという話ではなかったハズです。でないと

>https://okwave.jp/qa/q9339175.html
>の続き

にはなりませんし、タイトルの「スライドショーなどずっと繰り返す処理 」にも該当しません。

回答No.3

shimix

質問者さんが提示されたソースでは、loop()の呼び出しは4秒間隔ですがloop()の中で無限ループしています。最初に呼び出された時点でフリーズします。

『繰り返す』というのは、loop()を4秒間隔で呼び出す処理を無限ループさせる（インデックスが最大値を超えたら最小値に戻す）という話です。なのでloop()では今現在のインデックス値のデータを処理してからインデックスに+1（最大値を超えていたら最小値をセット）して、次の呼び出しをsetTImeoutで指定するだけです。loop()の中ではループ処理は不要です。

お礼

forがなくてもsetIntervalなどで繰り返し処理が出来るのでforがいらないという事でしょうか？
forで無限ループを作るとfor事態に時間指定はできないので、これを一回でも実行してしまうと無限ループを指定しない時間の間に行てしまうので、フリーズするという事ですかね？

無限ループにしないと繰り返しませんけど・・・
と言っていたけど．．．

補足

https://codepen.io/anon/pen/zzqjKg

このように変更しましたが確かにループはしなくなりました、
これでちゃんと繰り返し処理のループになっており同じことが出来るのでしょうか？

回答No.2

shimix

>このようにしたのですがフリーズするのは何故でしょう?

forループの中ではほぼ何もしていませんよね。無限ループでこんなものを実行すれば応答不能になるのが当然です。実行する処理（一定の時間待ちがある）をする前提で「繰り返す」べきです。

カウンタ初期化
while (1) { // 無条件繰り返し
カウンタに従った処理
処理の待ち合わせ
カウントアップ
カウンタが要素数以上になったら初期化
}

他の言語だと処理の待ち合わせ（sleep とか wait）で調整しますが、JavaScriptはsetTimeoutで再呼び出しなんですかね。

書くとすれば

i = 0;
setTimeout(loop(), 4000);

function loop() {
// i を使った処理（最初は 0）
i++;
if (i >= arrayItem.length) { i = 0; }
setTimeout(loop(), 4000);
}

でしょうか（変数のスコープなどは適宜合わせてください）。

お礼

setTimeout(loop(), 9000);
// loop();

上記のように作った関数の呼び出しを9秒ごとにしたのですがそれでもフリーズします。

補足

これはloop関数全体の処理を9秒間で一回行え、終わらせろという事ですよね。
setTimeout(loop(), 9000);

これはloop関数全体の処理を可能な限り早く行ない続けろという事ですよね。
loop();
ただこちらも自分自身を呼び出す部分を4秒後にしているのでフリーズしないと思ったのですが、
なぜするのでしょうか？

回答No.1

shimix

>また繰り返すためにはどうすればいいのでしょうか？

インデックス用のカウンタが要素数を超えたら最初の値に戻す・・ということをやります。

>初期化すると必然的に無限ループになりませんか？

無限ループにしないと繰り返しませんけど・・・

お礼

https://codepen.io/anon/pen/zzqjKg

なのでこのようにしたのですがフリーズするのは何故でしょう?

補足

ncaught RangeError: Maximum call stack size exceeded

変更後によってブラウザはフリーズしなくなりましたが、まだスタックオーバーフローとでてきて、ちゃんと動きません。

forをなくしてもまだループ処理によって問題が起きているのでしょうか？