最大调用堆栈大小超出错误

我正在使用Direct Web Remoting（DWR）JavaScript库文件，并且仅在Safari（台式机和iPad）中出现错误

它说

超出最大呼叫堆栈大小。

该错误的确切含义是什么，它会完全停止处理吗？

也可以解决Safari浏览器的所有问题（实际上是在iPad Safari ，

JS：执行超出超时

我假设是相同的调用堆栈问题）

#1楼

如果您不小心两次导入/嵌入相同的JavaScript文件，有时可以得到此文件，值得在检查器的“资源”选项卡中进行检查。

#2楼

在Chrome开发者工具栏控制台中检查错误详细信息，这将为您提供调用堆栈中的功能，并引导您进行导致错误的递归。

#3楼

如果出于某种原因需要无限的进程/递归运行，则可以在单独的线程中使用Webworker。 http://www.html5rocks.com/en/tutorials/workers/basics/

如果要操纵dom元素并重绘，请使用动画http://creativejs.com/resources/requestanimationframe/

#4楼

下面的相同代码的两个调用如果减少1，则在我的计算机上的Chrome 32中均可运行，例如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);

#5楼

您可以在crome浏览器中找到递归函数，按ctrl + shift + j，然后按Source（源）选项卡，这将为您提供代码编译流程，并且您可以在代码中使用断点来查找。

#6楼

就我而言，我正在发送输入元素而不是它们的值：

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

代替：

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

这使我的Chrome标签冻结，直到页面无响应时甚至没有显示“等待/杀死”对话框。

#7楼

以我为例，两个jQuery模态相互重叠显示。防止这种情况解决了我的问题。

#8楼

就我而言，点击事件正在子元素上传播。因此，我不得不提出以下几点：

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>

#9楼

检测stackoverflows的问题是，有时堆栈跟踪会消失，您将无法看到实际发生的情况。

我发现一些Chrome较新的调试工具对此有用。

点击“ Performance tab ，确保已启用Javascript samples ，您将获得类似的内容。

很明显这里有溢出！如果单击extendObject您将可以在代码中实际看到确切的行号。

您还可以看到可能会有所帮助的时机，也可能会看到红鲱鱼。

如果您实际上找不到问题，则另一个有用的技巧是将许多console.log语句放在您认为是问题所在的位置。上面的上一步可以帮助您。

在Chrome浏览器中，如果您重复输出相同的数据，它将像这样显示，从而更清楚地指出问题所在。在这种情况下，堆栈在最终崩溃之前命中了7152帧：

#10楼

就我而言，我正在使用以下命令将大字节数组转换为字符串：

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

bytes包含数百万个条目，太大而无法容纳在堆栈中。

#11楼

我还面临类似的问题，这是使用下拉徽标上传框上传徽标时的详细信息

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

控制台中的错误：

我通过从div标记中删除onclick="$('#filePhoto').click()"解决了这一问题。

#12楼

我遇到了同样的问题，我通过删除一个在ajax上使用过两次的字段名来解决了该问题，例如

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

#13楼

我知道此线程很旧，但是我认为值得一提的是我发现此问题的情况，因此它可以帮助其他人。

假设您有这样的嵌套元素：

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

您有两种选择可以避免这种情况：

将孩子移到父母的外部。
将stopPropagation函数应用于子元素。

#14楼

我有这个错误，因为我有两个同名的JS函数

#15楼

如果您使用的是Google地图，请检查纬度是否正在传递到new google.maps.LatLng中，格式是否正确。就我而言，它们是作为未定义的传递的。

#16楼

有时由于转换数据类型而发生，例如，您有一个被视为字符串的对象。

例如，在js客户端中的nodejs中的nodejs中的socket.id不是字符串。要将其用作字符串，您必须在前面添加单词String：

String(socket.id);

#17楼

在我的情况下的问题是因为我的子级路由与父级路径相同：

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' },]}
];

#18楼

在我的情况下，我在ajax调用中遇到此错误，并且尝试传递该变量的数据尚未定义，这向我显示了此错误，但未描述未定义的变量。我添加了定义，变量n获得了价值。

#19楼

当未声明该变量时，我试图分配一个变量，即一个值。

声明变量修复了我的错误。

#20楼

检查您是否有一个调用自身的函数。例如

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

#21楼

T̶h̶i̶s̶̶c̶a̶n̶̶h̶a̶p̶p̶e̶n̶̶w̶h̶e̶n̶̶y̶o̶u̶̶t̶r̶y̶̶p̶u̶s̶h̶̶a̶n̶̶a̶r̶r̶a̶i̶i̶n̶t̶̶
let alerts = []; alerts.push(alerts);
编辑-
我错了。谢谢@melpomene的更正。

我在AWS cloud 9控制台中遇到错误，删除了上面的代码后，问题解决了。我将返回代码，找出其修复的真正原因并在此处进行更新。

#22楼

几乎每个答案都指出，这只能由无限循环引起。事实并非如此，否则您可能会通过深度嵌套的调用来使堆栈超负荷运行（并不是说这很有效，但这肯定在可能的范围内）。如果您可以控制JavaScript VM，则可以调整堆栈大小。例如：

node --stack-size=2000

另请参阅：如何增加Node.js中的最大调用堆栈大小

#23楼

我们最近在我们正在处理的管理站点中添加了一个字段-contact_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-问题已解决。

#24楼

这还会导致Maximum call stack size exceeded错误：

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

同样在这里：

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

从Mozilla Docs中：

但要注意：以这种方式使用应用时，存在冒超出JavaScript引擎参数长度限制的风险。应用带有太多参数（想想成千上万个参数）的函数的结果因引擎而异（JavaScriptCore的硬编码参数限制为65536），因为该限制（甚至包括任何过大堆栈的性质）行为）未指定。一些引擎将引发异常。更有害的是，其他人将任意地限制实际传递给应用函数的参数数量。为了说明后一种情况：如果这样的引擎有四个参数的限制（实际上的限制当然要高得多），则好像在上面的示例中通过了参数5、6、2、3一样，而不是整个数组。

因此，请尝试：

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

#25楼

遇到相同的问题，就没想到是什么原因开始怪Babel;）

使代码在浏览器中不返回任何异常：

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

问题被严重创建|| （或）作为babel创建自己的类型检查的部分：

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

所以删除

|| null

使通天塔翻译工作。

#26楼

那对我有用

$('form')[0].submit()

#27楼

代码中的某个地方有一个递归循环（即，一个函数最终会一次又一次地调用自身，直到堆栈已满）。

其他浏览器要么堆栈更大（因此您会超时），要么由于某种原因（可能是错误放置的try-catch）吞没了错误。

错误发生时，使用调试器检查调用堆栈。

#28楼

这意味着在代码的某处，您正在调用一个函数，该函数又调用另一个函数，依此类推，直到达到调用堆栈限制。

这几乎总是因为没有满足基本情况的递归函数。

查看堆栈

考虑这段代码...

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

这是经过几次调用后的堆栈...

如您所见，调用堆栈会不断增长，直到达到极限：浏览器采用硬编码的堆栈大小或内存耗尽。

为了对其进行修复，请确保您的递归函数具有可以满足的基本情况。

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