Question

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

简单一点，我知道这些代码中的一些是janky：

$(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

正如杰伊先前所述，问题在于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');
}

未捕获RangeError：超出最大调用堆栈大小 - 无法找到递归

2 个答案: