我正在使用直接Web Remoting (DWR) JavaScript库文件,只在Safari(桌面和iPad)中得到一个错误
它说
超过最大调用堆栈大小。
这个错误到底是什么意思,它是否完全停止处理?
Safari浏览器也有任何修复(实际上是在iPad Safari上,它说
JS:执行超时
我认为这是相同的调用堆栈问题)
我正在使用直接Web Remoting (DWR) JavaScript库文件,只在Safari(桌面和iPad)中得到一个错误
它说
超过最大调用堆栈大小。
这个错误到底是什么意思,它是否完全停止处理?
Safari浏览器也有任何修复(实际上是在iPad Safari上,它说
JS:执行超时
我认为这是相同的调用堆栈问题)
当前回答
几乎每个答案都说这只能由无限循环引起。这是不正确的,否则您可以通过深度嵌套调用溢出堆栈(并不是说这是有效的,但它肯定是在可能的范围内)。如果你可以控制你的JavaScript虚拟机,你可以调整堆栈大小。例如:
节点——时= 2000
请参见:如何在Node.js中增加最大调用堆栈大小
其他回答
以下相同代码的调用如果减少1,在我的计算机上的Chrome 32中工作,例如17905 vs 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);
我在这里还面临着类似的细节问题 上传logo时使用下拉logo上传框
<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="$('#文件照片').click()"从div标签。
检测堆栈溢出的问题是,有时堆栈跟踪将被解开,您将无法看到实际发生了什么。
我发现Chrome的一些较新的调试工具在这方面很有用。
点击Performance选项卡,确保Javascript样本被启用,你会得到类似这样的结果。
溢出的地方很明显!如果单击extendObject,您将能够看到代码中确切的行号。
你也可以看到时间,可能有帮助,也可能没有帮助,或者转移注意力。
另一个有用的技巧是,如果你不能真正发现问题,在你认为问题所在的地方放置大量的console.log语句。上面的步骤可以帮助你做到这一点。
在Chrome中,如果你反复输出相同的数据,它会像这样显示问题更清楚。在这个例子中,堆栈在最终崩溃之前击中了7152帧:
有趣的是,没有人提到异步函数中的等待调用。在我的例子中,我有超过1.5 MB的循环和数据库交互文件。
async function uploadtomongodb() {
await find('user', 'user2', myobj0).then(result => {
}
})
等待将删除“超过最大调用堆栈大小”。否则内存负载过多。不确定Node是否可以处理超过700行和对象。
这意味着在代码的某个地方,您正在调用一个函数,该函数又调用另一个函数,以此类推,直到达到调用堆栈限制。
这几乎总是因为递归函数的基本情况没有得到满足。
查看堆栈
考虑这段代码…
(function a() {
a();
})();
下面是几次调用后的堆栈…
正如您所看到的,调用堆栈不断增长,直到达到极限:浏览器硬编码的堆栈大小或内存耗尽。
为了修复它,确保你的递归函数有一个基本情况,能够满足…
(function a(x) {
// The following condition
// is the base case.
if ( ! x) {
return;
}
a(--x);
})(10);