javascript - 未捕获的范围错误: Maximum call stack size exceeded - can't find recursion

Question

在我加载页面的 20 次左右中，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();

在您的代码中，此函数将作为递归调用，因此您可以获得最大调用堆栈错误。尝试评论这个函数，然后检查错误是否会出现