Saya menggunakan Web Langsung Remoting (DWR) JavaScript library file dan saya mendapatkan kesalahan hanya di Safari (desktop dan iPad)
Ia mengatakan
Maksimum call stack size terlampaui.
Apa sebenarnya maksud dari pesan error ini dan tidak berhenti pengolahan benar-benar?
Juga ada perbaikan untuk Safari
browser (benar-Benar di iPad Safari
, ini kata
JS:eksekusi melebihi batas waktu
yang saya mengasumsikan adalah panggilan yang sama tumpukan masalah)
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.
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);
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.
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, pastikan
Javascript 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/
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:
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);
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()">
<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;
}
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
},
.....