Maksimum call ukuran stack melampaui kesalahan

Itu berarti bahwa di suatu tempat dalam kode anda, anda memanggil fungsi yang pada gilirannya memanggil fungsi lain dan sebagainya, sampai anda mencapai call stack batas.

Ini hampir selalu karena fungsi rekursif dengan basis kasus yang isn't terpenuhi.

Melihat tumpukan

Pertimbangkan ini kode...

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

Berikut ini adalah stack setelah beberapa panggilan...

Seperti yang anda lihat, panggilan stack tumbuh sampai menyentuh batas: browser hardcoded ukuran stack atau memori kelelahan.

Dalam rangka untuk memperbaiki ini, pastikan bahwa anda fungsi rekursif memiliki basis kasus yang dapat bertemu...

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

Anda bisa mendapatkan ini kadang-kadang jika anda secara tidak sengaja import/embed sama file JavaScript dua kali, senilai check di tab sumber daya inspektur.

Dalam kasus saya, saya mengirim input elemen-elemen yang bukan nilai-nilai mereka:

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

Bukannya:

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

Ini membeku saya tab Chrome ke titik itu didn't bahkan menunjukkan 'Menunggu/Membunuh' dialog untuk saat halaman menjadi tidak responsif...

Ada rekursif loop di suatu tempat dalam kode anda (yaitu fungsi yang akhirnya menyebut dirinya lagi dan lagi. sampai stack penuh).

Browser lain baik memiliki tumpukan yang lebih besar (sehingga anda mendapatkan timeout sebaliknya) atau mereka menelan error untuk beberapa alasan (mungkin parah ditempatkan try-catch).

Menggunakan debugger untuk memeriksa tumpukan panggilan ketika kesalahan terjadi.

Dalam kasus saya, saya mengubah besar byte array ke string dengan menggunakan kode berikut:

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

byte terdapat beberapa juta entri, yang terlalu besar untuk muat pada stack.

Masalah dengan mendeteksi stackoverflows kadang-kadang jejak stack akan bersantai dan anda tidak't dapat melihat apa yang's benar-benar terjadi.

I've ditemukan beberapa dari Chrome's baru debugging tools yang berguna untuk ini.

Memukul Kinerja tab, pastikanJavascript sampel` diaktifkan dan anda'll mendapatkan sesuatu seperti ini.

It's cukup jelas mana yang meluap di sini! Jika anda klik pada extendObject anda'akan dapat benar-benar melihat tepat nomor baris dalam kode.

Anda juga dapat melihat timing yang mungkin atau mungkin tidak membantu atau ikan merah.

Lain trik berguna jika anda dapat't benar-benar menemukan masalah adalah untuk menempatkan banyak konsol.log pernyataan di mana anda pikir masalahnya adalah. Sebelumnya langkah di atas dapat membantu anda dengan ini.

Di Chrome jika anda berulang kali output data yang identik akan menampilkan seperti ini menunjukkan di mana masalahnya lebih jelas. Dalam hal ini misalnya tumpukan memukul 7152 frame sebelum akhirnya jatuh:

Dalam kasus saya, klik acara merambat pada elemen anak. Jadi, aku harus meletakkan berikut:

e.stopPropagation()

pada acara klik:

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

Berikut ini adalah kode html:

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

Jika anda membutuhkan sebuah proses yang tak terbatas/rekursi berjalan untuk beberapa alasan, anda dapat menggunakan webworker di thread terpisah. http://www.html5rocks.com/en/tutorials/workers/basics/

jika anda ingin memanipulasi elemen dom dan redraw, menggunakan animasi http://creativejs.com/resources/requestanimationframe/

Periksa rincian kesalahan di Chrome dev toolbar konsol, ini akan memberikan anda fungsi dalam panggilan stack, dan memandu anda menuju rekursi yang's menyebabkan kesalahan.

Dalam kasus saya, dua jQuery modals yang menunjukkan ditumpuk di atas satu sama lain. Mencegah yang memecahkan masalah saya.

Periksa jika anda memiliki sebuah fungsi yang memanggil dirinya sendiri. Misalnya

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

Kami baru saja menambahkan bidang ke admin situs kami sedang bekerja pada - contact_type... mudah kan? Nah, jika anda memanggil pilih "type" dan mencoba untuk mengirim melalui jquery ajax menyebutnya gagal dengan kesalahan ini terkubur jauh di dalam jquery.js Don't melakukan hal ini:

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

Masalahnya adalah bahwa jenis:jenis - saya percaya itu adalah kita penamaan argumen "type" - memiliki sebuah nilai variabel bernama jenis isn't masalah. Kami mengubah ini untuk:

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

Dan menulis ulang some_function.php dengan demikian - masalah yang dipecahkan.

Ini juga dapat menyebabkan panggilan Maksimal ukuran stack melampaui error:

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

Sama di sini:

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

Dari Mozilla Docs:

Tapi hati-hati: dalam menggunakan menerapkan cara ini, anda menjalankan resiko melebihi mesin JavaScript's argumen batas panjang. Konsekuensi dari menerapkan fungsi dengan terlalu banyak argumen (berpikir lebih dari puluhan ribuan argumen) berbeda-beda di engine (JavaScriptCore telah keras-kode argumen batas 65536), karena batas (bahkan sifat terlalu-besar-stack perilaku) yang tidak ditentukan. Beberapa mesin akan melempar pengecualian. Lebih perniciously, orang lain akan sewenang-wenang membatasi jumlah argumen yang benar-benar berlalu ke diterapkan fungsi. Untuk menggambarkan kasus yang terakhir ini: jika mesin tersebut memiliki batas empat argumen (yang sebenarnya batas tentu saja secara signifikan lebih tinggi), itu akan menjadi seperti jika argumen 5, 6, 2, 3 telah telah berlalu untuk menerapkan dalam contoh di atas, daripada penuh array.

Jadi cobalah:

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

Hampir setiap jawabannya di sini menyatakan bahwa hal ini hanya dapat disebabkan oleh loop tak terbatas. Yang's tidak benar, anda bisa jika tidak over-run stack melalui sangat bersarang panggilan (untuk tidak mengatakan bahwa's efisien, tapi itu's tentu dalam ranah mungkin). Jika anda memiliki kontrol JavaScript anda VM, anda dapat menyesuaikan ukuran stack. Misalnya:

simpul-stack-size=2000

Lihat juga: https://stackoverflow.com/questions/11332422/how-can-i-increase-the-maximum-call-stack-size-in-node-js

Aku tahu ini thread lama, tapi saya pikir itu's layak disebut skenario saya menemukan masalah ini sehingga dapat membantu orang lain.

Misalkan anda telah bersarang unsur-unsur seperti ini:

<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>

Anda tidak dapat memanipulasi elemen anak acara dalam acara induknya karena itu menjalar ke dirinya sendiri, membuat panggilan rekursif sampai pengecualian adalah throwed.

Jadi kode ini akan gagal:

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

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

Anda memiliki dua pilihan untuk menghindari hal ini:

• Pindahkan anak ke luar dari orang tua.
• Menerapkan stopPropagation fungsi untuk elemen anak.

Kedua doa yang identik kode di bawah ini jika mengalami penurunan sebesar 1 bekerja di Chrome 32 di komputer saya misalnya 17905 vs 17904. Jika berjalan seperti yang mereka akan menghasilkan kesalahan "RangeError: Maksimum call ukuran stack melampaui". Tampaknya menjadi batas ini tidak hardcoded tetapi tergantung pada perangkat keras dari komputer anda. Itu tidak muncul bahwa jika dipanggil sebagai fungsi diri ini dikenakan batas yang lebih tinggi daripada jika dipanggil sebagai metode yaitu ini kode tertentu menggunakan lebih sedikit memori ketika dipanggil sebagai fungsi.

Dipanggil sebagai metode:

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

ninja.chirp(17905);

Dipanggil sebagai fungsi:

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

chirp(20889);

anda dapat menemukan fungsi rekursif di crome browser,tekan ctrl+shift+j dan kemudian sumber tab, yang memberikan anda kode kompilasi mengalir dan anda dapat menemukan dengan menggunakan break point dalam kode.

Saya juga menghadapi masalah serupa, berikut adalah rincian ketika meng-upload logo menggunakan dropdown meng-upload logo kotak

<div>
      <div class="uploader greyLogoBox" id="uploader" flex="64" onclick="$('#filePhoto').click()">

        <input type="file" name="userprofile_picture"  id="filePhoto" ngf-select="$ctrl.createUploadLogoRequest()"/>
        cloud_upload
        <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;
}

sebelum koreksi kode saya :

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]);
          }

Kesalahan di konsol:

Aku diselesaikan dengan menghapus onclick="$('#filePhoto').klik()" dari tag div.

Saya menghadapi masalah yang sama Aku telah memutuskan hal ini dengan menghapus nama field yang digunakan dua kali pada ajax e.g

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

Aku punya kesalahan ini karena saya memiliki dua Fungsi JS dengan nama yang sama