最大呼叫堆栈大小超过错误

Question

我正在使用直接的Web远程（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() } )

这将我的铬片冻结到一个点，甚至没有向我显示“ wait/kill”对话框，因为该页面变得无反应...

Answer 3

如果您两次意外导入/嵌入相同的JavaScript文件，有时可以得到此功能，值得在检查员的资源选项卡中检查。

Answer 4

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

其他浏览器要么具有较大的堆栈（因此您会获得超时），要么出于某种原因吞咽错误（也许是一个不好的trycatch）。

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

Answer 5

检测Stackoverflows的问题有时是堆栈跟踪会放松，您将无法看到实际发生的事情。

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

点击性能选项卡，请确保已启用JavaScript Samples已启用，您将获得类似的东西。

很明显，溢出在这里！如果单击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 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]);
}

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

就我而言，这是我有2个具有相同名称的变量！

Answer 10

检查Chrome Dev工具栏控制台中的错误详细信息，这将为您提供呼叫堆栈中的功能，并引导您朝着导致错误的递归。

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

如果由于某种原因需要运行无限的过程/递归，则可以在单独的线程中使用网络工作者。

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

Answer 14

这里几乎每个答案都指出，这只能由无限循环引起。事实并非如此，否则您可以通过深度嵌套的呼叫过度运行堆栈（并不是说这是有效的，但这肯定是可能的领域）。如果您可以控制JavaScript VM，则可以调整堆栈尺寸。例如：

node -stack-size = 2000

另请参见：我如何增加node.js中的最大呼叫堆栈大小

Answer 15

最近，我们在正在研究的管理站点中添加了一个字段-Contact_Type ...容易吧？好吧，如果您称选择“类型”并尝试通过jQuery ajax调用来发送它，则该错误埋在jquery.js中不执行此操作：

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, type:type }
});

问题是那种类型：类型 - 我相信这是我们命名参数“类型” - 具有命名类型的值变量不是问题。我们将其更改为：

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, contact_type:type }
});

相应地解决问题 - 解决问题。

Answer 16

就我而言，两种jQuery模式彼此堆叠。防止这解决了我的问题。

Answer 17

检查您是否具有调用自己的函数。例如

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

Answer 18

对我来说，作为打字稿的初学者，这是 _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)];
    }
});

在上面的数据函数中，我使用了相同的名称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

如果在我的计算机上的Chrome 32中通过1个工作减少了以下相同代码的两种调用，例如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);

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

console中的错误：

我通过删除onclick =“ $（＃filephoto'）。 （）“来自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

就我而言，在app.module.ts中，我遇到了此错误，因为我在Imports和entryComponents中声明了组件。

Example:

import { MyComponent } from '....';

@NgModule({
  declarations: [
    MyComponent 
  ],
  imports: [
    MyComponent  -- > remove this from here!!!!
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [MyComponent]
})
export class AppModule { }

Answer 27

您可以在Crome浏览器中找到递归功能，按Ctrl+Shift+J，然后在源选项卡中找到代码汇编流，您可以在代码中使用Break Point找到。

Answer 28

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

假设您已经嵌套了这样的元素：

<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> stopPropagation 函数函数。

Answer 29

我有这个错误，因为我有两个JS功能，同名

Answer 30

如果您正在使用Google Maps，请检查LAT LNG是否被传递到新的Google.maps.latlng是一种适当的格式。就我而言，他们被不确定。