- ベストアンサー
スタックオーバーフローとでてきて、ちゃんと動きませ
https://okwave.jp/qa/q9340961.html の続き ncaught RangeError: Maximum call stack size exceeded 変更後によってブラウザはフリーズしなくなりましたが、まだスタックオーバーフローとでてきて、ちゃんと動きません。 forをなくしてもまだループ処理によって問題が起きているのでしょうか？ https://codepen.io/anon/pen/zzqjKg
- htmlcss123
- お礼率66% (194/293)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ものすごくざっくりしたサンプルを書いてみます。 <html> <head> </head> <body> <script type="text/javascript"> <!-- var i = 0; var arr = ['a', 'b', 'c']; var loop = function() { document.getElementById('tmp').value = arr[i]; i++; if (i >= arr.length) { i = 0; } setTimeout(loop, 1000); } setTimeout(loop, 1000); // --> </script> <input type="text" id="tmp" value="-"> </body> </html> 配列arrの定義と、arr[i]を使っている部分を書き替えるだけで『繰り返し実行する』処理が出来ると思いますが・・・
その他の回答 (2)
- shimix
- ベストアンサー率54% (865/1590)
ちなみに「次の要素の処理」を先にしたい（ここではFadeIn）であれば var i = 0; var arr = ['a', 'b', 'c']; var loop = function() { var j = i + 1; if (j >= arr.length) { j = 0; } // j番目の要素のFadeIn // i番目の要素のFadeOut i++; if (i >= arr.length) { i = 0; } setTimeout(loop, 4000); // 繰り返し間隔 } setTimeout(loop, 9000); // 実行開始までの待ち時間 とするのが適切じゃないかと思います。
お礼
なぜ https://codepen.io/anon/pen/zzqjKg ですと一瞬に終わってしまい提示の物だと指定時間毎に繰り返すのでしょうか？ どこに違いがあるのでしょうか？
補足
var loop = function () {に Uncaught RangeError: Maximum call stack size exceeded と出てきて止まってしまいます。 インスペクタで見るとこの現象が起きません setTimeout(loop, 9000); // 実行開始までの待ち時間は関数を呼び出す時間なので、ブラウザが起動してこのアニメーションが9秒後に始まりそれまでは関数loopは発動しないという事ですね。 つまりこのアニメーションの繰り返しの間隔はこの数値は関係なくあくまで setTimeout(loop, 4000); // 繰り返し間隔の方のみで決まるのですね。 それではこちらを長くすればフリーズしにくくなるのですかね＜？
- shimix
- ベストアンサー率54% (865/1590)
>このようにしてみましたが、 ポイントだけ抜き出してみました（間違っていないか確認してください）。 if(i < arrayItem.length){ if(i !== 2) { // 処理1 ++i; } if(i !== 2) { // 処理2 --i; } } else { i = 0; } i の取り得る値は0からいくつまででしょうか（arrayItemの要素数はいくつですか）。チェックの比較対象がarrayItem.lengthだったり 2 だったりでは状況がわかりません。 というか i が 0 →処理1実行→1になる→処理2実行→0に戻る なので、全然処理が進まない（違う i の値で処理がされない）と思うのですが・・・ もしカウントアップされたとしても 1 →処理1実行→2になって終わり 2→要素数に等しい（要素数未満ではない）→何も処理せずに0に戻して終わり というカタチなので、（処理してもらいたいのに）処理されない部分が出てくると思います。『どういう値で呼び出されたらどういう動きをするのか』を上記のように追いかけてみてください。
お礼
もちろんそのようにして問題なく動くことはインスペクタで確認済です。 出ては消えてという状態は再現できています。 問題はなぜ一瞬に行われて、指定した時間通りに繰り返さないかの部分だけです。 同じようにやっているのになぜ一瞬で終わってしまうのでしょうか？
補足
https://codepen.io/anon/pen/zzqjKg この形でインスペクタ上は完璧にうまくいっています。 ただひとつづつインスペクタで行わなせいかいっぺん時に処理される成果 var loop = function () {に Uncaught RangeError: Maximum call stack size exceeded と出てきて止まってしまいます。
お礼
https://codepen.io/anon/pen/zzqjKg このようにしてみましたが、 ncaught RangeError: Maximum call stack size exceeded とでて止まってしまいかつ一瞬に処理を終わってしまうのでインスペクタ上でひとつづつ見ていかないとうまく動いていることが目に見えません。 インスペクタ上でひとつづつやるとうまくいっているのですが 、なぜインターバルの時間を付けているのに一瞬に終わってしまのでしょうか？