• ベストアンサー

スタックオーバーフローとでてきて、ちゃんと動きませ

https://okwave.jp/qa/q9340961.html の続き ncaught RangeError: Maximum call stack size exceeded 変更後によってブラウザはフリーズしなくなりましたが、まだスタックオーバーフローとでてきて、ちゃんと動きません。 forをなくしてもまだループ処理によって問題が起きているのでしょうか? https://codepen.io/anon/pen/zzqjKg

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

  • ベストアンサー
  • shimix
  • ベストアンサー率54% (865/1590)
回答No.1

ものすごくざっくりしたサンプルを書いてみます。 <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]を使っている部分を書き替えるだけで『繰り返し実行する』処理が出来ると思いますが・・・

htmlcss123
質問者

お礼

https://codepen.io/anon/pen/zzqjKg このようにしてみましたが、 ncaught RangeError: Maximum call stack size exceeded とでて止まってしまいかつ一瞬に処理を終わってしまうのでインスペクタ上でひとつづつ見ていかないとうまく動いていることが目に見えません。 インスペクタ上でひとつづつやるとうまくいっているのですが 、なぜインターバルの時間を付けているのに一瞬に終わってしまのでしょうか?

その他の回答 (2)

  • shimix
  • ベストアンサー率54% (865/1590)
回答No.3

ちなみに「次の要素の処理」を先にしたい(ここでは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); // 実行開始までの待ち時間 とするのが適切じゃないかと思います。

htmlcss123
質問者

お礼

なぜ https://codepen.io/anon/pen/zzqjKg ですと一瞬に終わってしまい提示の物だと指定時間毎に繰り返すのでしょうか? どこに違いがあるのでしょうか?

htmlcss123
質問者

補足

var loop = function () {に Uncaught RangeError: Maximum call stack size exceeded と出てきて止まってしまいます。 インスペクタで見るとこの現象が起きません setTimeout(loop, 9000); // 実行開始までの待ち時間は関数を呼び出す時間なので、ブラウザが起動してこのアニメーションが9秒後に始まりそれまでは関数loopは発動しないという事ですね。 つまりこのアニメーションの繰り返しの間隔はこの数値は関係なくあくまで setTimeout(loop, 4000); // 繰り返し間隔の方のみで決まるのですね。 それではこちらを長くすればフリーズしにくくなるのですかね<?

  • shimix
  • ベストアンサー率54% (865/1590)
回答No.2

>このようにしてみましたが、 ポイントだけ抜き出してみました(間違っていないか確認してください)。 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に戻して終わり というカタチなので、(処理してもらいたいのに)処理されない部分が出てくると思います。『どういう値で呼び出されたらどういう動きをするのか』を上記のように追いかけてみてください。

htmlcss123
質問者

お礼

もちろんそのようにして問題なく動くことはインスペクタで確認済です。 出ては消えてという状態は再現できています。 問題はなぜ一瞬に行われて、指定した時間通りに繰り返さないかの部分だけです。 同じようにやっているのになぜ一瞬で終わってしまうのでしょうか?

htmlcss123
質問者

補足

https://codepen.io/anon/pen/zzqjKg この形でインスペクタ上は完璧にうまくいっています。 ただひとつづつインスペクタで行わなせいかいっぺん時に処理される成果 var loop = function () {に Uncaught RangeError: Maximum call stack size exceeded と出てきて止まってしまいます。

関連するQ&A

  • jQueryのエラーコードの意味を教えてください

    jQueryのエラーコードの意味を教えてください。 「Uncaught RangeError: Maximum call stack size exceeded」 animate関数を使っているのですが、 サイトが全く動かなくなってしまい、Chormeで確認したところ 「Uncaught RangeError: Maximum call stack size exceeded」という エラーが出ていました。 調べているのですが、英文サイトばかりで、意味が今一つ掴めません。 調べた内容は、 (最大コールスタックサイズを超えました) 変数の呼び出しに問題アリ 関数は自由に呼び出せるが、無限に呼び出せる訳ではないみたい 全く意味がわからず、苦戦しています。 出来れば詳しく意味を教えていただけると嬉しいです。 (参考になる分かりやすいサイトでも結構です) 宜しくお願いします。

  • fizzbuzzがうまくいきません

    fizzbuzzがうまくいきません https://codepen.io/anon/pen/mWbvbp?editors=1112 fizzbuzzだけになってしまいます。 つまりあまりが両方ともすっと0になっているようですが、 なぜ1づつ増えて行っていないのでしょうか? インスペクタで見ると3fizと5fizは0になっています。 始めは0割る3はあまりが0なので初めのあまりは0だからでしょうか? するとループ処理の結果どうなっているかというのはインスペクタで見ることはできないのでしょうか?

  • JSがうまくいかない

    クリックするたびにポイントが10加算されるようにしたかったのですが、なぜかクリックするとNANになってしまいます。 codepen上ではうまく再現できていないですが、ソースを張っておきました。 https://codepen.io/anon/pen/oWbvEe?editors=0001 またインスペクタで確認してNanだったのですが、codepenはインスペクタのようにソースを見る機能はないのですか?

  • チェックボックスがすべてfalseになる

    チェックボックスがチェックされているか否かによって 処理をかえたいのですが なぜかチェックをしていてもすべてfalseになってしまいます。 これはチェックしていればtrue、していなければfalseになるはずなんですよね? 一部抜粋しました。 https://codepen.io/anon/pen/jmoLmQ

  • disabledプロパティが存在しないと出てきます

    disabledプロパティが存在しないと出てきます。 下記の部分です・ if(hintBtn.disabled === 'disabled') もう少し全体像は下記です。 https://codepen.io/anon/pen/wjbebe 仕様上disabledプロパティは、初めは存在しないのでしょうか?

  • 二度実行するのを防止したい。

    クイズゲームの判定で、複数入力された回答の一つでも正解があれば正解とするようにしたのですが、正解の処理を一度しても処理が終わらずに二度点数が入ってしまうので一度でも正解になったらそこで処理を止めたいのですがexitを入れた所今度はうまく動かなくなりました。 この方法は間違えないのでしょうか? https://codepen.io/anon/pen/bKoObo

  • 繰り返し処理をして、要素がいくつあっても、うまくい

    while文で繰り返し処理をして、要素がいくつあっても、うまくいくようにしたいのですが、var inputResultをカプセル化できないのでこのような場合どうすればいいのでしょうか? https://codepen.io/anon/pen/XqOWrQ document.querySelectorAll('.js-myBtn').addEventListener と変更したのですが、このボタンの一つ目を押したら一つ目として実行二つ目以降も同様にとなりません。 イベントを起こすトリガーの要素を配列で指定はできないのでしょうか?

  • buttonタグがうまくいかない

    【半角は0.5文字】として、自動文字数カウントしますの部分にリセットボタンを作ろうとしたのですがなぜがresetという文字列が出てこず、白い線のようになってしまいます。 下記では問題なくできているのになぜでしょうか? https://codepen.io/anon/pen/vRGvOe webcreation.space/html/count-tool.html#js-goto-count-half です。

    • ベストアンサー
    • HTML
  • 空の要素の文字列を取得するとnullではなくund

    空の要素の文字列を取得するとnullではなくundefinedが返ってくるのはなぜでしょうか? var history1Txt = history1.value; また値が入っていてもundefinedが返ってきます。 値が入っている時だけ新しい履歴のテキストを古い履歴にコピーして、常に履歴がサイクルするようにしたいです。 https://codepen.io/anon/pen/MVzRLa

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

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

専門家に質問してみよう