未捕获范围错误：超出最大调用堆栈大小 - 找不到递归

Question

Chrome 每 1 次左右加载页面一次抛出此错误。我已经浏览了代码 - 请记住，这或多或少是我第一次使用 jQuery 做任何事情 - 找不到问题的明显来源。我知道这可能是递归。事实上，错误不会在每个页面加载时引发，这使得调试变得更加困难。多看几双眼睛会有很大帮助。

放轻松，我知道其中一些代码很卡顿：

$(document).ready(function() {
    // viewport fix for iOS
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
        $('meta[name="viewport"]').remove();
        $('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">').appendTo('head');
    }
    //imgx retina image swap
    $(function() {
        $('.image').imgx(); 
    });
    // animate loader
    function animateLoader() {
        $('#loader').animate({ 'opacity' : '0' },400, function() {
            $('#loader').animate({ 'opacity' : '1' },0, function() {
                animateLoader();
            });
        });
    }
    animateLoader();
    // hamburger toggle class
    $('.hamburger').click(function() {
        $('.hamburger').toggleClass('is-active');
        $('#nav').slideToggle(200);
    });
    // set on state if active
    $('.linkhome.active span.pre').css({ 'width' : '10px' });
    // nav hover
    $('#nav ul li').hover(function() {
        $(this).children('span.post').animate({ width : '10px' }, 100);
    },function() {
        $(this).children('span.post').animate({ width : '0' }, 100);
    });
    $('#nav ul li, section div a').click(function() {
        if (!$(this).is('.active')) {
            // hide mobile nav on click and scroll to top
            if (window.matchMedia('(max-width: 992px)').matches) {
                $('html,body').animate({ scrollTop: 0 }, 400, 'swing' );
                setTimeout(function () {
                    $('.hamburger').toggleClass('is-active');
                    $('#nav').slideToggle(200); // delay allows band and scrollTop animations to complete
                }, 400);
            }
            if ($(this).is('.linkhome')) { var sectionColor = '#60cfc7'; } 
            else if ($(this).is('.linkplans')) { var sectionColor = '#49bbcc'; }
            else if ($(this).is('.linknetwork')) { var sectionColor = '#6ca3ab'; }
            else if ($(this).is('.linkguarantees')) { var sectionColor = '#a8f4ff'; }
            else if ($(this).is('.linkcontact')) { var sectionColor = '#fff'; }
            var linkId = '.' + $(this).attr('class');
            var sectionId = '#' + $(this).attr('class').replace('link', '');
            $('#band').animate({
                'height' : $(sectionId).height(),
                'background-color' : sectionColor
            }, 400);
            var positionWords = 0;
            $(sectionId).prevAll().each(function() {
                positionWords += parseInt($(this).outerHeight() - 1, 10); // -1 to compensate for jQuery margin collapse bug
            });
            $('#words').animate({
                'margin-top': -( positionWords )
            },400);
            $('#nav ul li' + linkId).addClass('active').siblings().removeClass('active');
            $(linkId).children('span.pre').animate({ width : '10px' }, 100);
            $(linkId).siblings().children('span.pre').animate({ width : '0' }, 100);
            if (window.matchMedia('(max-width: 1000px)').matches) {
                $(linkId).children('span.post').animate({ width : '0' }, 0);
            } else {
                $(linkId).children('span.post').animate({ width : '0' }, 100);
            }
            return false;
        }
    });
    // animate buy plan arrow
    $('ul.plan li.planBuy').hover(function() {
        $(this).children('span').stop().animate({ left : '5px' }, 100);
    },function() {
        $(this).children('span').stop().animate({ left : '0' }, 100);
    });
    // buy plan urls
    $('#buyBronze').click(function(){
        goog_report_conversion('/clients/cart.php?a=add&pid=1');
        window.location = '/clients/cart.php?a=add&pid=1';
    });
    $('#buySilver').click(function(){ 
        goog_report_conversion('/clients/cart.php?a=add&pid=2');
        window.location = '/clients/cart.php?a=add&pid=2';
    });
    $('#buyGold').click(function(){ 
        goog_report_conversion('/clients/cart.php?a=add&pid=3');
        window.location = '/clients/cart.php?a=add&pid=3';
    });
});
// position content on load
$(window).on('load', function(){
    $('#band').animate({ 'height' : $('#home').height(), 'background-color' : '#60cfc7' });
    $('#words').animate({ 'margin-top' : -$('#preload').height() - 1 }); // -1 to compensate for jQuery margin collapse bug
});
// re-position content on resize
$(window).resize(function() {   
    var sectionId = '#' + $('#nav ul li').closest('.active').attr('class').replace(/link|active/g, '');
    var positionWords = 0;
    $(sectionId).prevAll().each(function() {
        positionWords += parseInt($(this).outerHeight() - 1, 10); // -1 to compensate for jQuery margin collapse bug
    });
    $('#words').css({ 'margin-top': -( positionWords ) });
    $('#band').css({ 'height' : $( sectionId ).height() });         
});

Answer 1

// animate loader
    function animateLoader() {
        $('#loader').animate({ 'opacity' : '0' },400, function() {
            $('#loader').animate({ 'opacity' : '1' },0, function() {
                animateLoader();
            });
        });
    }
    animateLoader();

在您的代码中，此函数将作为递归调用，以便您可以获得最大调用堆栈错误。 尝试评论此功能，而不是检查错误是否可以出现错误

Answer 2

正如 Jay 之前所说，问题出在 animateLoader() 函数中的递归。如果你只想在页面加载后隐藏你的加载器一次 - 你可以用css动画来做到这一点：

.CSS：

#loader {
    /* Your loader style */
    animation: hide 0.4s 1;
}
@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

如果你想随时显示和隐藏加载器，你可以使用 css 过渡和一点点 js 来实现：

.CSS：

#loader {
    /* Your loader style */
    opacity: 1;
    transition: opacity 0.4s;
}
#loader.hidden {
    opacity: 0;
}

.JS：

$(document).ready(function() {
    hideLoader();
});
function hideLoader() {
    $('#loader').addClass('hidden');
}
function showLoader() {
    $('#loader').removeClass('hidden');
}