最大コールスタックサイズ超過エラー

Direct Web Remoting（DWR）JavaScriptライブラリファイルを使用していて、Safari（デスクトップおよびiPad）でのみエラーが発生する

それは言う

呼び出しスタックの最大サイズを超えました。

このエラーは正確には何を意味し、処理を完全に停止しますか？

また、Safariブラウザの修正（実際にはiPad Safari、

JS：実行がタイムアウトを超えました

私が想定しているのは同じコールスタックの問題です）

これは、コードのどこかで、呼び出しスタックの制限に達するまで、別の関数を呼び出す関数などを呼び出していることを意味します。

これはほとんどの場合、基本ケースが満たされていない再帰関数が原因です。

スタックを表示する

このコードを検討してください...

(function a() {
    a();
})();

これは、いくつかの呼び出しの後のスタックです...

ご覧のとおり、呼び出しスタックは、ブラウザのハードコーディングされたスタックサイズまたはメモリの枯渇という制限に達するまで増加します。

それを修正するには、再帰関数が満たすことができる基本ケースを持っていることを確認してください...

(function a(x) {
    // The following condition 
    // is the base case.
    if ( ! x) {
        return;
    }
    a(--x);
})(10);

同じJavaScriptファイルを誤って2回インポート/埋め込んだ場合に、インスペクタの[リソース]タブで確認することで、これが発生することがあります。

私の場合、値の代わりに入力要素を送信していました：

$.post( '',{ registerName: $('#registerName') } )

の代わりに：

$.post( '',{ registerName: $('#registerName').val() } )

これにより、Chromeタブがフリーズし、ページが応答しなくなったときの「待機/終了」ダイアログが表示されなくなりました...

コードのどこかに再帰ループがあります（つまり、スタックがいっぱいになるまで、最終的に何度も自分自身を呼び出す関数）。

他のブラウザでは、スタックが大きい（代わりにタイムアウトが発生する）か、何らかの理由でエラーが発生します（配置が不適切なtry-catchなど）。

エラーが発生したときにデバッガーを使用してコールスタックを確認します。

スタックオーバーフローを検出する際の問題は、スタックトレースがほどけ、実際に何が起こっているかを確認できない場合があることです。

これに役立つChromeの新しいデバッグツールがいくつか見つかりました。

ヒットPerformance tab、確認してJavascript samples有効になっていると、あなたはこのような何かを得るでしょう。

オーバーフローがどこにあるかは明らかです！クリックするextendObjectと、実際のコードで正確な行番号を確認できます。

また、役立つかそうでないかもしれないタイミングや赤いニシンを見ることができます。

実際に問題が見つからない場合のもう1つの便利なトリックは、問題がconsole.logあると思う場所にたくさんのステートメントを置くことです。上記の前のステップはこれを助けることができます。

Chromeでは、同じデータを繰り返し出力すると、次のように表示され、問題がより明確に示されます。この例では、スタックは最終的にクラッシュする前に7152フレームをヒットしました。

私の場合、次のようにして大きなバイト配列を文字列に変換していました。

String.fromCharCode.apply(null, new Uint16Array(bytes))

bytes 数百万のエントリが含まれていますが、スタックに収まりません。

私の場合、クリックイベントは子要素に伝播していました。だから、私は以下を入れなければなりませんでした：

e.stopPropagation（）

クリックイベント：

 $(document).on("click", ".remove-discount-button", function (e) {
           e.stopPropagation();
           //some code
        });
 $(document).on("click", ".current-code", function () {
     $('.remove-discount-button').trigger("click");
 });

これがhtmlコードです：

 <div class="current-code">                                      
      <input type="submit" name="removediscountcouponcode" value="
title="Remove" class="remove-discount-button">
   </div>

Chrome開発ツールバーコンソールでエラーの詳細を確認してください。これにより、コールスタック内の関数が提供され、エラーの原因となっている再帰に向けて案内されます。

何らかの理由で無限のプロセス/再帰を実行する必要がある場合は、別のスレッドでWebワーカーを使用できます。 http://www.html5rocks.com/en/tutorials/workers/basics/

dom要素を操作して再描画する場合は、アニメーションを使用して くださいhttp://creativejs.com/resources/requestanimationframe/

ここでのほぼすべての回答は、これは無限ループによってのみ引き起こされる可能性があると述べています。それは真実ではありません。そうでなければ、深くネストされた呼び出しによってスタックをオーバーランする可能性があります（それが効率的であるとは言えませんが、それは確かに可能性の領域にあります）。JavaScript VMを制御できる場合は、スタックサイズを調整できます。例えば：

node --stack-size=2000

参照：Node.jsの最大コールスタックサイズを増やす方法

私の場合、2つのjQueryモーダルが重なり合って表示されていました。それを防ぐことで私の問題は解決しました。

最近取り組んでいる管理サイトにフィールドを追加しました-contact_type ...簡単ですよね？さて、select "type"を呼び出してjquery ajax呼び出しで送信しようとすると、jquery.jsの奥深くに埋め込まれたこのエラーで失敗します。これを行わないでください：

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, type:type }
});

問題はそのtype：typeです-引数に「type」という名前を付けていると思います-typeという名前の値変数を持つことは問題ではありません。これを次のように変更しました。

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, contact_type:type }
});

そして、それに応じてsome_function.phpを書き直しました-問題は解決しました。

自分自身を呼び出す関数があるかどうかを確認します。例えば

export default class DateUtils {
  static now = (): Date => {
    return DateUtils.now()
  }
}

これもMaximum call stack size exceededエラーを引き起こす可能性があります：

var items = [];
[].push.apply(items, new Array(1000000)); //Bad

こっちも一緒：

items.push(...new Array(1000000)); //Bad

Mozilla Docsから：

ただし、注意してください。applythis wayを使用すると、JavaScriptエンジンの引数の長さ制限を超えるリスクがあります。引数が多すぎる（数万を超えると考える）関数を適用した場合の結果は、エンジンによって異なります（JavaScriptCoreには65536の引数のハードコードがあります）。動作）は指定されていません。一部のエンジンは例外をスローします。さらに悪質なことに、適用された関数に実際に渡される引数の数を制限する人もいます。この後者のケースを説明すると、そのようなエンジンに4つの引数の制限がある場合（実際の制限はもちろん大幅に高くなります）、上記の例に適用するために引数5、6、2、3が渡されたかのようになります。完全な配列ではなく。

だから試してください：

var items = [];
var newItems = new Array(1000000);
for(var i = 0; i < newItems.length; i++){
  items.push(newItems[i]);
}

コンピューターのChrome 32で作業が1つ減った場合、以下の同じコードの両方の呼び出し（例：17905対17904）。そのまま実行すると、「RangeError：最大呼び出しスタックサイズを超えました」というエラーが発生します。この制限はハードコードされていないようですが、マシンのハードウェアに依存しています。関数として呼び出された場合、この自発的な制限はメソッドとして呼び出された場合よりも高くなります。つまり、この特定のコードは、関数として呼び出されたときに使用するメモリが少なくなります。

メソッドとして呼び出されます：

var ninja = {
    chirp: function(n) {
        return n > 1 ? ninja.chirp(n-1) + "-chirp" : "chirp";
    }
};

ninja.chirp(17905);

関数として呼び出されます：

function chirp(n) {
    return n > 1 ? chirp( n - 1 ) + "-chirp" : "chirp";
}

chirp(20889);

再帰関数はクロームブラウザーで検索できます。Ctrl+ Shift + Jを押してから[ソース]タブを押すと、コードコンパイルフローが提供され、コード内のブレークポイントを使用して検索できます。

私もここで同様の問題に直面しましたドロップダウンロゴアップロードボックスを使用してロゴをアップロードするときの詳細です

<div>
      <div class="uploader greyLogoBox" id="uploader" flex="64" onclick="$('#filePhoto').click()">
        <img id="imageBox" src="{{ $ctrl.companyLogoUrl }}" alt=""/>
        <input type="file" name="userprofile_picture"  id="filePhoto" ngf-select="$ctrl.createUploadLogoRequest()"/>
        <md-icon ng-if="!$ctrl.isLogoPresent" class="upload-icon" md-font-set="material-icons">cloud_upload</md-icon>
        <div ng-if="!$ctrl.isLogoPresent" class="text">Drag and drop a file here, or click to upload</div>
      </div>
      <script type="text/javascript">
          var imageLoader = document.getElementById('filePhoto');
          imageLoader.addEventListener('change', handleImage, false);

          function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {

                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }
      </script>
      </div>

CSS.css

.uploader {
  position:relative;
  overflow:hidden;
  height:100px;
  max-width: 75%;
  margin: auto;
  text-align: center;

  img{
    max-width: 464px;
    max-height: 100px;
    z-index:1;
    border:none;
  }

  .drag-drop-zone {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 32px;
  }
}

.uploader img{
  max-width: 464px;
  max-height: 100px;
  z-index:1;
  border:none;
}



.greyLogoBox {
  width: 100%;
  background: #EBEBEB;
  border: 1px solid #D7D7D7;
  text-align: center;
  height: 100px;
  padding-top: 22px;
  box-sizing: border-box;
}


#filePhoto{
  position:absolute;
  width:464px;
  height:100px;
  left:0;
  top:0;
  z-index:2;
  opacity:0;
  cursor:pointer;
}

修正前の私のコードは：

function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {
                  onclick="$('#filePhoto').click()"
                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }

コンソールのエラー：

onclick="$('#filePhoto').click()"divタグから削除することで解決しました。

同じ問題に直面していましたが、ajaxで2回使用されたフィールド名を削除することで解決しました。

    jQuery.ajax({
    url : '/search-result',
    data : {
      searchField : searchField,
      searchFieldValue : searchField,
      nid    :  nid,
      indexName : indexName,
      indexType : indexType
    },
.....

私はこのスレッドが古いことを知っていますが、他の人を助けるためにこの問題を見つけたシナリオについて言及する価値があると思います。

次のようなネストされた要素があるとします。

<a href="#" id="profile-avatar-picker">
    <span class="fa fa-camera fa-2x"></span>
    <input id="avatar-file" name="avatar-file" type="file" style="display: none;" />
</a>

子要素のイベントはそれ自体に伝播し、例外がスローされるまで再帰的な呼び出しを行うため、親のイベント内で子要素のイベントを操作することはできません。

したがって、このコードは失敗します。

$('#profile-avatar-picker').on('click', (e) => {
    e.preventDefault();

    $('#profilePictureFile').trigger("click");
});

これを回避するには、2つのオプションがあります。

• 子を親の外側に移動します。
• 子要素にstopPropagation関数を適用します。

同じ名前の2つのJS関数があるため、このエラーが発生しました

Googleマップを使用している場合は、緯度経度が渡されnew google.maps.LatLngているかどうかが適切な形式かどうかを確認してください。私の場合、それらは未定義として渡されていました。

私の場合の問題は、親と同じパスを持つ子ルートがあるためです：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'prefix' },
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

だから私は子供のルートの行を削除する必要がありました

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

私の場合、ajax呼び出しでこのエラーが発生し、その変数を渡そうとしたデータが定義されていないため、このエラーが表示されますが、定義されていない変数については説明されていません。私は、変数nが値を得たことを定義しました。

同じ問題に遭遇しましたが、何が悪いのか理解できず、バベルのせいになり始めました;）

ブラウザーでコードが例外を返さない：

if (typeof document.body.onpointerdown !== ('undefined' || null)) {

問題はひどく作成されました|| （または）babelが独自の型チェックを作成するときのパーツ：

function _typeof(obj){if(typeof Symbol==="function"&&_typeof(Symbol.iterator)==="symbol")

だから削除

|| null

バベルの蒸散がうまくいった。

私の場合、誤って同じ変数名を割り当てており、val関数に「class_routine_id」を割り当てています

var class_routine_id = $("#class_routine_id").val(class_routine_id);

それは次のようになるはずです：

 var class_routine_id = $("#class_routine_id").val(); 

Angularでは、mat-selectを使用していて400以上のオプションがある場合、このエラーが発生する可能性があります https://github.com/angular/components/issues/12504

@ angular / materialバージョンを更新する必要があります

React-Native 0.61.5を（npm 6.9.0＆node 10.16.1）とともに使用しています

Projectに新しいライブラリをインストールしている間、

（例：npm install @ react-navigation / native --save）

最大コールスタックサイズ超過エラー

そのため、私は試します

sudo npm cache clean --force

（注：-以下のコマンドは通常 、npmキャッシュサイズに応じて1〜2分かかります）

データ型の変換が原因で発生することもありました。たとえば、文字列と見なしたオブジェクトがある場合などです。

nodejsのsocket.idは、例としてjsクライアントでも、文字列でもありません。文字列として使用するには、前に文字列という単語を追加する必要があります。

String(socket.id);

変数が宣言されていないときに、変数に値を割り当てようとしました。

変数を宣言するとエラーが修正されました。