Почему javaScript/jQuery, кажется, игнорирует мой оператор IF для события bubbling?

Question

Я уверен, что я просто не правильно понимаю основы JavaScript. Но мог ли кто-нибудь указать, почему у меня создается впечатление, что выражение if if оценивает значение true, при запуске события, хотя утверждение внутри оператора if должно оцениваться как false?

Возможно, если (sFormula> 168) работает так, как планировалось, когда я нажимаю тег html < a> один раз за раз, но если я быстро нажму на него, все, похоже, сойдет с ума.

Вот jsFiddle с кодом: http://jsfiddle.net/twimB/pGHrP/ и ниже - всего лишь фрагмент целого.

Я был бы очень признателен, если бы кто-то мог объяснить свое время.

Спасибо.

Html

<a href="#" id="right">&raquo;</a> 

JQuery

$("#right").click(function(event){ 
    event.stopImmediatePropagation(); 
    if(busy == false){ 
     busy = true ; 
     var parentMargin = $(".wrap").offset().left; 
     var parentWidth = $(".wrap").width(); 
     var carouselMargin = $(".block").offset().left; 
     var carouselWidth = $(".block").width(); 
     var rFormula = carouselWidth - ((parentMargin - carouselMargin) + parentWidth); 
     $(".pLeft").text(""); 
     $(".pRight").text("if (rFormula > 0) {perform slide} fFormula is: " + rFormula); 
     if(rFormula > 168){ 
      $(".block").animate({"left": "-=168px"}, "slow"); 
     } 
     busy = false ; 
    } 
}); 

Answer 1

.animate() метод не останавливает выполнение скрипта. Что происходит, так это то, что он запускает анимацию, и выполнение сценария продолжается, а busy сразу устанавливается в false.

Что вам нужно установить флаг только после того, как анимация закончена, используя функцию обратного вызова:

if(rFormula > 168){ 
    busy = true; 
    $(".block").animate({"left": "-=168px"}, "slow", function() { busy = false }); 
} 

(Обратите внимание, что я переехал установки флага здесь, потому что нет никакой пользы в установлении его до анимации начинается)

Demo:. http://jsfiddle.net/pGHrP/1/ (я обновил только правую кнопку)