661

我正在使用 Direct Web Remoting (DWR) JavaScript 库文件,并且仅在 Safari(桌面和 iPad)中出现错误

它说

超出最大调用堆栈大小。

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

浏览器的任何修复Safari(实际上在 上iPad Safari,它说

JS:执行超时

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

4

35 回答 35

765

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

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

查看堆栈

考虑这段代码...

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

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

网络检查员

如您所见,调用堆栈会不断增长,直到达到限制:浏览器硬编码堆栈大小或内存耗尽。

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

(function a(x) {
    // The following condition 
    // is the base case.
    if ( ! x) {
        return;
    }
    a(--x);
})(10);
于 2011-05-23T10:05:44.163 回答
95

如果您不小心两次导入/嵌入相同的 JavaScript 文件,有时会得到此信息,值得在检查器的资源选项卡中检查。

于 2012-04-23T01:58:01.333 回答
89

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

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

代替:

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

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

于 2016-08-13T23:55:35.887 回答
34

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

其他浏览器要么有更大的堆栈(所以你会得到一个超时),要么他们出于某种原因吞下了错误(可能是一个错误的 try-catch)。

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

于 2011-05-23T09:55:25.313 回答
25

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

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

点击Performance tab,确保Javascript samples已启用,你会得到类似的东西。

溢出在哪里很明显!如果单击,extendObject您将能够实际看到代码中的确切行号。

在此处输入图像描述

您还可以查看可能有用或可能没有帮助的时间安排或红鲱鱼。

在此处输入图像描述


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

在 Chrome 中,如果您重复输出相同的数据,它会像这样显示问题更清楚的地方。在这种情况下,堆栈在最终崩溃之前达到了 7152 帧:

在此处输入图像描述

于 2017-03-07T13:03:47.060 回答
17

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

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

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

于 2017-03-24T16:48:26.137 回答
7

就我而言,单击事件正在子元素上传播。所以,我不得不把以下内容:

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>
于 2017-01-16T15:36:25.257 回答
5

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

于 2012-05-28T08:48:19.557 回答
5

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

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

于 2012-11-15T05:41:49.263 回答
4

这也可能导致Maximum call stack size exceeded错误:

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]);
}
于 2019-06-28T15:45:16.770 回答
4

就我而言,我基本上忘记获取valueof input

错误的

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

正确的

let name=document.getElementById('name').value;
param={"name":name}
于 2020-08-24T07:50:11.293 回答
3

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

node --stack-size=2000

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

于 2019-02-06T20:48:50.607 回答
3

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

于 2019-04-09T19:35:48.647 回答
2

在我的例子中,两个 jQuery 模态显示堆叠在一起。防止这解决了我的问题。

于 2016-12-28T21:23:29.563 回答
2

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

export default class DateUtils {
  static now = (): Date => {
    return DateUtils.now()
  }
}
于 2018-11-22T13:13:40.653 回答
2

对于我作为 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
    }
}
于 2020-08-04T14:20:23.020 回答
2
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

于 2021-03-07T05:56:59.760 回答
1

如果在我的计算机上的 Chrome 32 中减 1,则以下相同代码的两个调用都可以工作,例如 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);
于 2014-02-20T13:12:24.617 回答
1

我也遇到了类似的问题,这里是使用下拉徽标上传框上传徽标时的详细信息

<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 标签中删除来解决它。

于 2017-08-03T08:37:59.827 回答
1

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

    jQuery.ajax({
    url : '/search-result',
    data : {
      searchField : searchField,
      searchFieldValue : searchField,
      nid    :  nid,
      indexName : indexName,
      indexType : indexType
    },
.....
于 2017-11-08T07:57:42.447 回答
1

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

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' },
    ]
  }
];
于 2018-07-25T17:06:02.237 回答
1

就我而言,这是我有 2 个同名的变量!

于 2021-09-08T01:26:04.853 回答
1

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

于 2021-10-17T10:08:43.670 回答
0

您可以在 crome 浏览器中找到您的递归函数,按 ctrl+shift+j 然后源选项卡,它为您提供代码编译流程,您可以在代码中找到使用断点。

于 2014-03-12T08:01:21.527 回答
0

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

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

<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函数应用于子元素。
于 2018-01-04T14:22:40.547 回答
0

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

于 2018-01-05T12:33:54.313 回答
0

如果您使用的是谷歌地图,请检查传入的 lat lngnew google.maps.LatLng格式是否正确。在我的情况下,它们被传递为未定义。

于 2018-01-30T13:25:43.310 回答
0

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

以js客户端为例,nodejs中的socket.id不是字符串。要将其用作字符串,您必须在之前添加单词 String:

String(socket.id);
于 2018-06-27T21:34:58.603 回答
0

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

于 2018-08-29T04:08:49.030 回答
0

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

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

于 2018-11-13T02:20:12.773 回答
0

遇到了同样的问题,不知道出了什么问题,开始责怪 Babel ;)

让代码在浏览器中不返回任何异常:

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

问题被严重创建 || (或)作为 babel 的部分创建自己的类型检查:

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

所以删除

|| null

使 babel 转译工作。

于 2019-07-05T07:22:39.207 回答
0

在我的情况下,我错误地分配了相同的变量名,并分配给 val 函数“class_routine_id”

var class_routine_id = $("#class_routine_id").val(class_routine_id);

它应该是这样的:

 var class_routine_id = $("#class_routine_id").val(); 
于 2020-01-05T16:09:20.680 回答
0

在 Angular 中,如果您使用 mat-select 并且有 400 多个选项,则可能会出现此错误 https://github.com/angular/components/issues/12504

你必须更新@angular/material 版本

于 2020-02-21T10:40:14.543 回答
0

我正在使用 React-Native 0.61.5以及(npm 6.9.0 & node 10.16.1

当我在项目中安装任何新库时,我得到了一个

(例如 npm install @react-navigation/native --save)

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

为此,我尝试

sudo npm 缓存清理 --force

(注意:- 下面的命令通常需要 1 到 2 分钟 ,具体取决于您的npm 缓存大小)

于 2020-02-27T05:26:23.617 回答
0

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

于 2021-01-08T21:19:06.637 回答