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

这意味着在代码的某处，您正在调用一个函数，该函数又调用另一个函数，依此类推，直到达到调用堆栈限制。这几乎总是因为没有满足基本情况的递归函数。查看堆栈考虑这段代码...

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

这是经过几次调用后的堆栈... 如您所见，调用堆栈会不断增长，直到达到极限：浏览器采用硬编码的堆栈大小或内存耗尽。为了对其进行修复，请确保您的递归函数具有可以满足的基本情况。

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

为陡土

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

授巨

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

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

代替：

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

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

惜堡沁戚

代码中的某个地方有一个递归循环（即一个函数，它最终一次又一次地调用自身，直到堆栈已满）。其他浏览器的堆栈较大（因此您会超时），或者由于某种原因（可能是错误放置的try-catch）吞没了错误。错误发生时，使用调试器检查调用堆栈。

担每棱绰

检测stackoverflows的问题是有时堆栈跟踪会消失，您将无法看到实际情况。我发现一些Chrome \较新的调试工具对此有用。点击Performance tab，确保已启用Javascript samples，您将得到类似的内容。很明显这里是溢出的地方！如果单击extendObject，您将可以在代码中实际看到确切的行号。您还可以看到可能会有所帮助的时机，也可能会看到红鲱鱼。如果您实际上找不到问题，则另一个有用的技巧是在您认为问题出处的地方放置很多console.log语句。上面的上一步可以帮助您。在Chrome浏览器中，如果您重复输出相同的数据，它将像这样显示，从而更清楚地指出问题所在。在这种情况下，堆栈在最终崩溃之前命中了7152帧：

容淑阔九

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

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

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

青董据零

就我而言，点击事件正在子元素上传播。因此，我不得不提出以下几点： 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>

粳饶瓢部

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

提孺局缎

如果出于某种原因需要无限的进程/递归运行，则可以在单独的线程中使用Webworker。 http://www.html5rocks.com/zh-CN/tutorials/workers/basics/ 如果要操纵dom元素并重绘，请使用动画 http://creativejs.com/resources/requestanimationframe/

款去芳尾脊

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

陷牡彭拈峰

几乎每个答案都指出，这只能由无限循环引起。事实并非如此，否则您可能会通过深度嵌套的调用来使堆栈超负荷运行（并不是说效率很高，但肯定在可能的范围内）。如果您可以控制JavaScript VM，则可以调整堆栈大小。例如： node --stack-size=2000 另请参阅：如何增加Node.js中的最大调用堆栈大小

怪酞撩匹

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

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

碉罕城爸

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

熊融炭臀陛

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

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

同样在这里：

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

从Mozilla文档中：但请注意：以这种方式使用应用程序时，您可能会面临超过 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]);
}

甲车劲

下面的相同代码的两次调用（如果减少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);

漂汀拦

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

款去芳尾脊

我也面临类似的问题，这里是细节使用下拉徽标上传框上传徽标时

<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()\"解决了它。

桔适丛

我面临着同样的问题我已经解决了它，删除了在ajax上使用过两次的字段名例如

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

车料

我知道此线程很旧，但是我认为值得一提的是我发现了此问题的情况，因此它可以帮助其他人。假设您有这样的嵌套元素：

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

贡炮逗握惫

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

坍锭嘉韭蓝

如果您使用的是Google地图，请检查纬度是否正以正确的格式传递到“ 31”中。就我而言，它们是作为未定义的传递的。

诫商

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

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

矾醒忻

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

括宠

遇到相同的问题，就没想到是什么原因开始怪Babel;）使代码在浏览器中不返回任何异常：

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

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

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

所以删除

|| null

使通天塔翻译工作。

纤洞需匪

有时由于转换数据类型而发生，例如，您有一个被视为字符串的对象。例如，在js客户端中的nodejs中的nodejs中的socket.id不是字符串。要将其用作字符串，必须在前面添加单词String：

String(socket.id);

剃摧庭峨僳

当未声明该变量时，我试图分配一个变量，即一个值。声明变量修复了我的错误。

疏腔傻小雹

那对我有用

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

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

27 个回复

发起人

javascript

html

webkit

callstack

dwr

问题状态

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

与内容相关的链接

27 个回复

发起人

javascript

html

webkit

callstack

dwr

问题状态