Chrome/jQuery Uncaught RangeError：超出最大调用堆栈大小

Posted 2023-02-22

【中文标题】Chrome/jQuery Uncaught RangeError：超出最大调用堆栈大小

【英文标题】：Chrome/jQuery Uncaught RangeError: Maximum call stack size exceeded

【发布时间】：2011-12-01 07:22:40

【问题描述】：

我在 chrome 上收到错误“Uncaught RangeError: Maximum call stack size exceeded”。这是我的 jQuery 函数

$('td').click(function () 
        if ($(this).context.id != null && $(this).context.id != '') 
            foo($('#docId').val(), $(this).attr('id'));
        
        return false;
    );

请注意，页面中有数以万计的单元格。但是，我通常将堆栈溢出与递归相关联，在这种情况下，据我所知没有。

创建这样的 lambda 会自动在堆栈上生成大量内容吗？有什么办法吗？

目前我唯一的解决方法是在渲染 html 时在每个单元格上显式生成 onclick 事件，这会使 HTML 更大。

【问题讨论】：

你确定 foo 函数不递归吗？如果您删除该函数调用，错误仍然会发生吗？

它在其他浏览器中是否按预期工作？注释foo($('#docId').val(), $(this).attr('id')); 行时是否会出现此错误？ -- 额外的性能提示：缓存选择器的结果 - 例如将$(this) 的结果保存在变量中，然后根据需要在处理程序中使用它。

我有类似的问题，但需要 mouseenter 事件。使用 body 或 table 时，我没有得到足够的事件。

【参考方案1】：

我最近也遇到了这个问题。我在对话框 div 中有一个非常大的表。超过 15,000 行。当在对话框 div 上调用 .empty() 时，我收到了上面的错误。

我找到了一个迂回的解决方案，在我调用清理对话框之前，我会从非常大的表中删除每隔一行，然后调用 .empty()。不过，它似乎奏效了。看来我的旧版 JQuery 处理不了这么大的元素。

【参考方案2】：

你可以使用

  $(document).on('click','p.class',function(e)
   e.preventDefault();
      //Code 
   );

【参考方案3】：

我的错误更多，发生的事情是循环点击（我猜），基本上是通过点击登录，父也被点击，最终导致超过最大调用堆栈大小。

$('.clickhere').click(function()
   $('.login').click();
);

<li class="clickhere">
  <a href="#" class="login">login</a>
</li>

【参考方案4】：

当您有无限循环时，您也可能会收到此错误。确保您没有任何无休止的递归自引用。

【讨论】：

这解决了我的问题。我有一个 <a id="linkDrink" onclick="drinkBeer();">Drink</a> 和一个 $('#linkDrink').click(); 在 drinkBeer() 。

【参考方案5】：

由于“页面中有成千上万个单元格”将点击事件绑定到每个单元格会导致严重的性能问题。有一种更好的方法可以做到这一点，即将点击事件绑定到正文，然后找出单元格元素是否是点击的目标。像这样：

$('body').click(function(e)
       var Elem = e.target;
       if (Elem.nodeName=='td')
           //.... your business goes here....
           // remember to replace $(this) with $(Elem)
       
)

此方法不仅可以使用本机“td”标签完成您的任务，还可以使用后来附加的“td”。我想你会对这篇关于event binding & delegate的文章感兴趣

---

或者你可以简单地使用jQuery的“.on()”方法，效果一样：

$('body').on('click', 'td', function()
        ...
);

【讨论】：

谢谢，无论如何我们都在努力争取性能，所以这是个好主意:-)

不，不要使用 .live()！！！ bitovi.com/blog/2011/04/… 使用 .delegate() （或 .on() 如果您的 jQuery 足够新），并从表级别而不是整个文档进行委托。这将大大提高您的性能，而不仅仅是使用 .live()，它实际上只是从整个文档向下委派。

并且 .live 已从 jQuery 1.9 中删除

【参考方案6】：

当我在一个带有许多其他 jQuery 插件的网站中使用 jQUery Fancybox 时，我遇到了这个问题。 当我使用 LightBox (site here) 而不是 Fancybox 时，问题就消失了。