jQuery錯誤-超出最大調用堆棧大小

Question

我知道這個jQuery錯誤是問題所在。 但是您可能會看到，此錯誤對於解決問題根本沒有太大幫助。 我使用jQuery 1.10.2，並包含一個名為jRumble的1.3版插件。

現在該腳本附帶了錯誤：

jQuery(document).ready(function() {
    jQuery('.landing-bar').jrumble({
        x: 1,
        y: 1,
        rotation: 0
    });

    var rumbleStart = function() {
        jQuery('.landing-bar').trigger('startRumble');
        setTimeout(rumbleStop, 200);
    };

    var rumbleStop = function() {
        jQuery('.landing-bar').trigger('stopRumble');
        setTimeout(rumbleStart, 785);
    };

    rumbleStart();
    animateScroll();
}); 

function animateScroll() {
    jQuery('.landing-bar').animate({
        width: '100%'
    }, {
        duration: 30000,
        easing: 'linear',
        complete:function() { 
            jQuery(this).css("width","0%");
        }
    });
    animateScroll();
}

我的代碼有什么問題？ 我認為可能是jQuery 1.10的語法錯誤。

謝謝你的幫助！

Answer 1

將animateScoll()放入complete回調中。 您不希望這樣一遍又一遍地調用它。

function animateScroll() {
    jQuery('.landing-bar').animate({
        width: '100%'
    }, {
        duration: 30000,
        easing: 'linear',
        complete:function() { 
            jQuery(this).css("width","0%");
            animateScroll();
        }
    });

}

說明：

動畫complete將調用jQuery回調complete 。 實際上，您要做的是一遍又一遍（在上次調用的毫秒內）調用animate函數，並使用永無止境的遞歸函數填充解釋器堆棧。

堆棧看起來像：

animateScroll()
animateScroll()
animateScroll()
animateScroll()
animateScroll()
...

您需要的是：

animateScroll()
animateScroll()
complete:function()
animateScroll()
complete:function()
animateScroll()
complete:function()
animateScroll()
...

這樣，每個步驟就可以在調用新步驟之前完成。