Ошибка jQuery - превышен максимальный размер стека вызовов

Question

Я знаю, что есть много вопросов, где эта ошибка jQuery была проблемой. Но, как вы можете видеть, эта ошибка не очень помогает вообще для решения проблемы. Я работаю с jQuery 1.10.2 и имею плагин в версии 1.3 с именем jRumble.

Теперь ошибка приходит с этим сценарием:

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(); 
     } 
    }); 

} 

ОБЪЯСНЕНИЕ:

Jquery обратного вызова complete вызывается, когда ваш оживляющий закончил. То, что вы по существу делаете, вызывает функцию animate снова и снова (в миллисекундах предыдущего вызова) и заполняя стек интерпретатора рекурсивной функцией, которая никогда не заканчивается.

Стек будет выглядеть так:

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

Что вам нужно:

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

так, что каждый шаг завершается до того, как новый один называется.