Tôi đang sử dụng tệp thư viện JavaScript Trực tiếp từ xa (DWR) và tôi chỉ gặp lỗi trong Safari (máy tính để bàn và iPad)
Nó nói rằng
Đã vượt quá kích thước ngăn xếp cuộc gọi tối đa.
Chính xác thì lỗi này có nghĩa là gì và nó có dừng xử lý hoàn toàn không?
Ngoài ra bất kỳ sửa chữa cho Safaritrình duyệt (Trên thực tế iPad Safari, nó nói
JS: thực thi vượt quá thời gian chờ
mà tôi giả sử là vấn đề ngăn xếp cuộc gọi tương tự)
Câu trả lời:
Điều đó có nghĩa là ở đâu đó trong mã của bạn, bạn đang gọi một hàm lần lượt gọi một hàm khác và cứ thế, cho đến khi bạn đạt giới hạn ngăn xếp cuộc gọi.
Điều này hầu như luôn luôn là do một hàm đệ quy với trường hợp cơ sở không được đáp ứng.
Hãy xem xét mã này ...
(function a() {
a();
})();Đây là chồng sau một số cuộc gọi ...
Như bạn có thể thấy, ngăn xếp cuộc gọi phát triển cho đến khi nó đạt đến một giới hạn: kích thước ngăn xếp được mã hóa cứng của trình duyệt hoặc cạn kiệt bộ nhớ.
Để khắc phục, hãy đảm bảo rằng hàm đệ quy của bạn có trường hợp cơ sở có thể được đáp ứng ...
(function a(x) {
// The following condition
// is the base case.
if ( ! x) {
return;
}
a(--x);
})(10);Đôi khi bạn có thể nhận được điều này nếu bạn vô tình nhập / nhúng cùng một tệp JavaScript hai lần, đáng để kiểm tra trong tab tài nguyên của trình kiểm tra.
Trong trường hợp của tôi, tôi đã gửi các phần tử đầu vào thay vì các giá trị của chúng:
$.post( '',{ registerName: $('#registerName') } )Thay vì:
$.post( '',{ registerName: $('#registerName').val() } )Điều này đã đóng băng tab Chrome của tôi đến một điểm mà nó thậm chí còn không hiển thị cho tôi hộp thoại 'Chờ / Giết' khi trang không phản hồi ...
Có một vòng lặp đệ quy ở đâu đó trong mã của bạn (tức là một hàm cuối cùng tự gọi đi gọi lại cho đến khi ngăn xếp đầy).
Các trình duyệt khác có ngăn xếp lớn hơn (vì vậy bạn sẽ có thời gian chờ thay thế) hoặc chúng nuốt lỗi vì một số lý do (có thể là lỗi thử bắt được đặt không tốt).
Sử dụng trình gỡ lỗi để kiểm tra ngăn xếp cuộc gọi khi xảy ra lỗi.
Vấn đề với việc phát hiện stackoverflows đôi khi dấu vết stack sẽ bị bung ra và bạn sẽ không thể thấy những gì đang thực sự xảy ra.
Tôi đã tìm thấy một số công cụ gỡ lỗi mới hơn của Chrome hữu ích cho việc này.
Nhấn Performance tab, đảm bảo Javascript samplesđược kích hoạt và bạn sẽ nhận được một cái gì đó như thế này.
Đó là khá rõ ràng nơi tràn vào đây! Nếu bạn nhấp vào, extendObjectbạn sẽ có thể thực sự thấy số dòng chính xác trong mã.
Bạn cũng có thể thấy thời gian có thể có hoặc không hữu ích hoặc cá trích đỏ.
Một mẹo hữu ích khác nếu bạn thực sự không thể tìm ra vấn đề là đặt nhiều console.logcâu mà bạn nghĩ là có vấn đề. Bước trước ở trên có thể giúp bạn với điều này.
Trong Chrome nếu bạn liên tục xuất dữ liệu giống hệt nhau, nó sẽ hiển thị như thế này cho thấy vấn đề rõ ràng hơn. Trong trường hợp này, ngăn xếp đã chạm tới 7152 khung trước khi nó bị sập:
Trong trường hợp của tôi, tôi đã chuyển đổi một mảng byte lớn thành một chuỗi bằng cách sử dụng như sau:
String.fromCharCode.apply(null, new Uint16Array(bytes))bytes chứa vài triệu mục, quá lớn để phù hợp với ngăn xếp.
var uintArray = new Uint16Array(bytes); var converted = []; uintArray.forEach(function(byte) {converted.push(String.fromCharCode(byte))});
Trong trường hợp của tôi, nhấp vào sự kiện đã được tuyên truyền trên phần tử con. Vì vậy, tôi đã phải đặt như sau:
e.stopPropagation ()
khi nhấp vào sự kiện:
$(document).on("click", ".remove-discount-button", function (e) {
e.stopPropagation();
//some code
});
$(document).on("click", ".current-code", function () {
$('.remove-discount-button').trigger("click");
});Đây là mã html:
<div class="current-code">
<input type="submit" name="removediscountcouponcode" value="
title="Remove" class="remove-discount-button">
</div>Nếu bạn cần một quá trình / đệ quy vô hạn chạy vì một số lý do, bạn có thể sử dụng một webworker trong một luồng riêng biệt. http://www.html5rocks.com/en/tutorials/workers/basics/
nếu bạn muốn thao tác các phần tử dom và vẽ lại, hãy sử dụng hoạt hình http://creativejs.com/resource/requestanimationframe/
Gần như mọi câu trả lời ở đây đều nói rằng điều này chỉ có thể được gây ra bởi một vòng lặp vô hạn. Điều đó không đúng, nếu không, bạn có thể chạy quá mức ngăn xếp thông qua các cuộc gọi được lồng vào nhau (không nói là hiệu quả, nhưng chắc chắn là trong lĩnh vực có thể). Nếu bạn có quyền kiểm soát máy ảo JavaScript, bạn có thể điều chỉnh kích thước ngăn xếp. Ví dụ:
node --stack-size=2000
Xem thêm: Làm cách nào tôi có thể tăng kích thước ngăn xếp cuộc gọi tối đa trong Node.js
Trong trường hợp của tôi, hai phương thức jQuery đã được hiển thị xếp chồng lên nhau. Ngăn chặn điều đó giải quyết vấn đề của tôi.
Gần đây chúng tôi đã thêm một trường vào một trang quản trị mà chúng tôi đang làm việc - contact_type ... dễ dàng phải không? Chà, nếu bạn gọi "loại" chọn và cố gắng gửi nó thông qua một cuộc gọi ajax jquery thì không thành công với lỗi này được chôn sâu trong jquery.js Đừng làm điều này:
$.ajax({
dataType: "json",
type: "POST",
url: "/some_function.php",
data: { contact_uid:contact_uid, type:type }
});Vấn đề là loại: loại - Tôi tin rằng chúng ta đặt tên cho đối số là "loại" - có một biến giá trị có tên là loại không phải là vấn đề. Chúng tôi đã thay đổi điều này thành:
$.ajax({
dataType: "json",
type: "POST",
url: "/some_function.php",
data: { contact_uid:contact_uid, contact_type:type }
});Và viết lại some_function.php cho phù hợp - vấn đề đã được giải quyết.
Kiểm tra nếu bạn có một chức năng gọi chính nó. Ví dụ
export default class DateUtils {
static now = (): Date => {
return DateUtils.now()
}
}Điều này cũng có thể gây ra Maximum call stack size exceededlỗi:
var items = [];
[].push.apply(items, new Array(1000000)); //BadTương tự ở đây:
items.push(...new Array(1000000)); //BadTừ tài liệu Mozilla :
Nhưng hãy cẩn thận: khi sử dụng áp dụng theo cách này, bạn sẽ gặp rủi ro vượt quá giới hạn độ dài đối số của công cụ JavaScript. Hậu quả của việc áp dụng một hàm có quá nhiều đối số (nghĩ rằng hơn hàng chục nghìn đối số) khác nhau giữa các công cụ (JavaScriptCore có giới hạn đối số được mã hóa cứng là 65536), bởi vì giới hạn (thực sự là bản chất của bất kỳ ngăn xếp quá lớn nào hành vi) là không xác định. Một số động cơ sẽ ném một ngoại lệ. Nghiêm trọng hơn, những người khác sẽ tùy ý giới hạn số lượng đối số thực sự được truyền cho hàm được áp dụng. Để minh họa trường hợp sau này: nếu một công cụ như vậy có giới hạn bốn đối số (giới hạn thực tế dĩ nhiên cao hơn đáng kể), thì sẽ như thể các đối số 5, 6, 2, 3 đã được thông qua để áp dụng trong các ví dụ trên, chứ không phải là mảng đầy đủ.
Hãy thử
var items = [];
var newItems = new Array(1000000);
for(var i = 0; i < newItems.length; i++){
items.push(newItems[i]);
}Cả hai cách gọi mã giống hệt bên dưới nếu giảm 1 công việc trong Chrome 32 trên máy tính của tôi, ví dụ 17905 so với 17904. Nếu chạy như vậy, chúng sẽ tạo ra lỗi "RangeError: Đã vượt quá kích thước ngăn xếp cuộc gọi tối đa". Dường như giới hạn này không bị mã hóa cứng mà phụ thuộc vào phần cứng của máy. Có vẻ như nếu được gọi như là một hàm thì giới hạn tự áp đặt này cao hơn so với nếu được gọi như một phương thức, tức là mã cụ thể này sử dụng ít bộ nhớ hơn khi được gọi như một hàm.
Được gọi là một phương thức:
var ninja = {
chirp: function(n) {
return n > 1 ? ninja.chirp(n-1) + "-chirp" : "chirp";
}
};
ninja.chirp(17905);Được gọi là một hàm:
function chirp(n) {
return n > 1 ? chirp( n - 1 ) + "-chirp" : "chirp";
}
chirp(20889);bạn có thể tìm thấy hàm đệ quy của mình trong trình duyệt crome, nhấn ctrl + shift + j và sau đó là tab nguồn, cung cấp cho bạn luồng biên dịch mã và bạn có thể tìm thấy bằng cách sử dụng điểm ngắt trong mã.
Tôi cũng gặp phải vấn đề tương tự ở đây là các chi tiết khi tải lên logo bằng hộp tải lên logo thả xuống
<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;
}trước khi sửa mã của tôi là:
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]);
}Lỗi trong giao diện điều khiển:
Tôi đã giải quyết nó bằng cách xóa onclick="$('#filePhoto').click()"khỏi thẻ div.
Tôi đã phải đối mặt với cùng một vấn đề Tôi đã giải quyết nó bằng cách xóa tên trường được sử dụng hai lần trên ajax, vd
jQuery.ajax({
url : '/search-result',
data : {
searchField : searchField,
searchFieldValue : searchField,
nid : nid,
indexName : indexName,
indexType : indexType
},
.....Tôi biết chủ đề này đã cũ, nhưng tôi nghĩ rằng đáng để đề cập đến kịch bản tôi đã tìm thấy vấn đề này để nó có thể giúp đỡ người khác.
Giả sử bạn có các phần tử lồng nhau như thế này:
<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>Bạn không thể thao tác các sự kiện phần tử con bên trong sự kiện của cha mẹ nó vì nó tự truyền cho chính nó, thực hiện các cuộc gọi đệ quy cho đến khi ngoại lệ được ném.
Vì vậy, mã này sẽ thất bại:
$('#profile-avatar-picker').on('click', (e) => {
e.preventDefault();
$('#profilePictureFile').trigger("click");
});Bạn có hai lựa chọn để tránh điều này:
Tôi đã gặp lỗi này vì tôi có hai Hàm JS có cùng tên
Nếu bạn đang làm việc với google maps, thì hãy kiểm tra xem lat lng đang được chuyển vào new google.maps.LatLngcó đúng định dạng không. Trong trường hợp của tôi, chúng đã được thông qua là không xác định.
Vấn đề trong trường hợp của tôi là vì tôi có con cái có cùng đường dẫn với cha mẹ:
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'prefix' },
{ path: 'home', loadChildren: './home.module#HomeModule' },
]
}
];Vì vậy, tôi đã phải loại bỏ các tuyến đường trẻ em
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: 'home', loadChildren: './home.module#HomeModule' },
]
}
];trong trường hợp của tôi, tôi gặp lỗi này trong cuộc gọi ajax và dữ liệu tôi đã cố gắng vượt qua biến đó chưa được xác định, điều đó cho tôi thấy lỗi này nhưng không mô tả biến đó không được xác định. Tôi đã thêm định nghĩa rằng biến n có giá trị.
Đã đi đến cùng một vấn đề, coulnd đã không tìm ra những gì sai bắt đầu đổ lỗi cho Babel;)
Có mã không trả lại bất kỳ ngoại lệ nào trong trình duyệt:
if (typeof document.body.onpointerdown !== ('undefined' || null)) {vấn đề được tạo ra tồi tệ | | (hoặc) một phần khi babel tạo kiểu kiểm tra riêng:
function _typeof(obj){if(typeof Symbol==="function"&&_typeof(Symbol.iterator)==="symbol")vì vậy loại bỏ
|| nulllàm cho babel transpilation làm việc.
trong Angular, nếu bạn đang sử dụng mat-select và có hơn 400 tùy chọn, lỗi này có thể xảy ra https://github.com/angular/components/issues/12504
bạn phải cập nhật @ phiên bản góc / vật liệu
Tôi đang sử dụng React-Native 0.61.5 cùng với ( npm 6.9.0 & nút 10.16.1 )
Trong khi tôi cài đặt bất kỳ thư viện mới nào trong Dự án, tôi đã nhận được một
(ví dụ: npm install @ Reac-navigation / local --save)
Vượt quá kích thước ngăn xếp cuộc gọi tối đa
cho điều đó, tôi cố gắng
sudo npm cache sạch - Force
(Lưu ý: - Lệnh bên dưới thường mất thời gian từ 1 đến 2 phút tùy thuộc vào kích thước bộ đệm npm của bạn )
Đôi khi xảy ra do chuyển đổi loại dữ liệu, ví dụ bạn có một đối tượng mà bạn coi là chuỗi.
socket.id trong nodejs hoặc trong js client làm ví dụ, không phải là một chuỗi. để sử dụng nó dưới dạng chuỗi, bạn phải thêm chuỗi từ trước:
String(socket.id);Tôi đã cố gắng gán một biến, một giá trị, khi biến đó chưa được khai báo.
Khai báo biến đã sửa lỗi của tôi.
dataajax. Đã sửa lỗi bằng cách khai báo các biến.