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

Question

我正在使用 Direct Web Remoting (DWR) JavaScript 库文件，并且仅在 Safari（桌面版和 iPad）中收到

错误

超出了最大调用堆栈大小。

这个错误到底是什么意思？它是否完全停止处理？

还有针对 Safari 浏览器的任何修复（实际上是在 iPad Safari 上，它说

JS：执行超时

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

Answer 1

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

这几乎总是因为递归函数的基本情况未得到满足。

查看堆栈

考虑这段代码...

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

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

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

为了修复它，请确保您的递归函数具有能够满足的基本情况......

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

Answer 2

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

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

而不是：

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

这将我的 Chrome 选项卡冻结到了一个点，当页面变得无响应时，它甚至没有向我显示“等待/终止”对话框...

Answer 3

如果您不小心导入/嵌入同一个 JavaScript 文件两次，有时可能会出现这种情况，值得在检查器的资源选项卡中检查。

Answer 4

代码中的某处存在递归循环（即最终一次又一次调用自身直到堆栈已满的函数）。

其他浏览器要么有更大的堆栈（所以你会得到一个超时），要么因为某种原因吞掉错误（可能是放置不当的 try-catch）。

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

Answer 5

检测堆栈溢出的问题是有时堆栈跟踪会展开，您将无法看到实际发生的情况。

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

点击性能选项卡，确保启用Javascript示例，您将得到类似这样的结果。

溢出的位置非常明显！如果您单击extendObject，您将能够实际看到代码中的确切行号。

您还可以查看可能有帮助或没有帮助的时间安排或转移注意力的时间。

---

如果您实际上无法找到问题，另一个有用的技巧是在您认为问题所在的位置放置大量 console.log 语句 上面的上一步可以帮助您解决此问题。

在 Chrome 中，如果您重复输出相同的数据，它会像这样显示，更清楚地显示问题所在。在本例中，堆栈在最终崩溃之前达到了 7152 帧：

Answer 6

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

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

bytes 包含数百万个条目，该条目太大而无法放入堆栈。

Answer 7

这也可能导致超出最大调用堆栈大小错误：

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

此处相同：

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

来自 Mozilla 文档：

但要注意：以这种方式使用 apply 时，您可能会面临超出限制的风险
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]);
}

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

Answer 9

就我而言，我有两个同名的变量！

Answer 10

检查 Chrome 开发工具栏控制台中的错误详细信息，这将为您提供调用堆栈中的函数，并指导您找到导致错误的递归。

Answer 11

就我而言，我基本上忘记获取input的value。

错误

let name=document.getElementById('name');
param={"name":name}

正确

let name=document.getElementById('name').value;
param={"name":name}

Answer 12

发送输入元素而不是它们的值很可能会像 FK 提到的那样解决它

Answer 13

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

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

Answer 14

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

node --stack-size=2000 另

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

Answer 15

我们最近在我们正在开发的管理网站中添加了一个字段 - contact_type...很简单吧？好吧，如果你调用 select“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 - 问题解决了。

Answer 16

就我而言，两个 jQuery 模式显示堆叠在一起。防止这种情况解决了我的问题。

Answer 17

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

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

Answer 18

对于我这个 TypeScript 初学者来说，这是 _var1 的 getter 和 setter 的问题。

class Point2{
    
    constructor(private _var1?: number, private y?: number){}

    set var1(num: number){
        this._var1 = num  // problem was here, it was this.var1 = num
    }
    get var1(){
        return this._var1 // this was return this.var1
    }
}

Answer 19

dtTable.dataTable({
    sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
    "processing": true,
    "serverSide": true,
    "order": [[6, "desc"]],
    "columnDefs": [
        {className: "text-right", "targets": [2, 3, 4, 5]}
    ],
    "ajax": {
        "url": "/dt",
        "data": function (d) {
            d.loanRef = loanRef;
        }
    },
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        var editButton = '';
        // The number of columns to display in the datatable
        var cols = 8;
        // Th row element's ID
        var id = aData[(cols - 1)];
    }
});

在上面的 data 函数中，我使用了相同的名称 d.loanRef = LoanRef 但没有创建变量 loanRef 因此递归声明了自身。

解决方案：声明一个 loanRef 变量，或者更好的是，使用与 d.loanRef 上使用的名称不同的名称。

Answer 20

该问题可能是由于递归调用没有任何终止条件所致。

就像我的例子一样，如果您看到下面的代码，我的 API 调用方法和我用于在该 API 调用后执行操作的方法具有相同的名称。

const getData = async () => {
try {
  const response = await getData(props.convID);
  console.log("response", response);
 } catch (err) {
  console.log("****Error****", err);
}
};

因此，基本上，解决方案是删除此递归调用。

Answer 21

如果减少 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);

Answer 22

我也遇到了类似的问题，这里是详细信息
上传徽标时，

<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="$('#filePhoto').click 解决了这个问题()" 来自 div 标签。

Answer 23

我遇到了同样的问题
我已经通过删除在 ajax 上使用了两次的字段名称解决了这个问题
例如

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

Answer 24

我的情况的问题是因为我的子路由与父路由具有相同的路径：

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

Answer 25

当 MongoDB 数据库的架构与我们创建的模型不匹配时，我在express/nodejs 应用程序中遇到此错误。

Answer 26

你可以在crome浏览器中找到你的递归函数，按ctrl+shift+j然后按source选项卡，这给你代码编译流程，你可以在代码中找到使用断点。

Answer 27

我知道这个线程很旧，但我认为值得一提的是我发现这个问题的场景，这样它可以帮助其他人。

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

<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 函数应用于子元素。

Answer 28

我遇到这个错误是因为我有两个同名的 JS 函数

Answer 29

如果您正在使用谷歌地图，请检查传入 new google.maps.LatLng 的 lat lng 的格式是否正确。就我而言，它们被视为未定义。

Answer 30

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

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

String(socket.id);