未捕获的 RangeError：最大调用堆栈大小超出了 chrome答案

【问题标题】：Uncaught RangeError: Maximum call stack size exceeded chrome未捕获的 RangeError：最大调用堆栈大小超出了 chrome
【发布时间】：2017-04-12 02:16:06
【问题描述】：

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

$(window).scroll(function(){
        if ($(this).scrollTop() < 170) {
            $('#main-nav').css('position', '');
            $('#fixed-header-icon').slideUp().addClass('remove');
            if ($('.ajelnews').length > 0) {
                $('.main-nav').removeClass('relative');
                $('.main-nav').css('top', '');
            }
            if (!$('#main-nav').hasClass('main-nav')) {
                $('#main-nav').removeClass("fixed-true");
                $(".close-fixed-header").css('display', 'none');
            }
        }
    });

从此行$(".close-fixed-header").css('display', 'none');

【问题讨论】：

试试.css('display', 'none');，而不是.hide()。除此之外，我们真的可以使用MCVE。
我不希望 jQuery 的 css 导致类似的事情（这是堆栈溢出错误）。正如 Cerbrus 所说，我们需要一个minimal reproducible example。
scroll 事件多次触发......我的猜测是 .slideUp() 是实际原因

标签： javascript jquery google-chrome

【解决方案1】：

$(window).scroll(function(){
    if ($(this).scrollTop() < 170) {
        $('#main-nav').css('position', '');
        $('#fixed-header-icon').slideUp().addClass('remove');
        if ($('.ajelnews').length > 0) {
            $('.main-nav').removeClass('relative');
            $('.main-nav').css('top', '');
        }
        if (!$('#main-nav').hasClass('main-nav')) {
            $('#main-nav').removeClass("fixed-true");
            $(".close-fixed-header").css('display', 'none');
        }
    }
});

因为您正在向滚动函数添加一个侦听器，在该函数中您正在执行 slideUp，这会导致 window.scroll 位置发生变化。这又会导致循环并进入无限循环。

这是你得到错误的地方。还有一次，您正在更改元素的显示属性。

当你改变显示位置时究竟会发生什么？

当 css 属性为任何元素显示 display:none 时，该特定元素将退出视图树或渲染树。这意味着浏览器将从视图中删除该特定元素。

如果您将其设置回display:block，则树将被更改并将元素放回视图。这会改变视图的高度和宽度，有时会导致滚动（取决于父级大小）。

【讨论】：