Почему javaScript / jQuery, похоже, игнорирует мой оператор IF при пузыре событий?
Я уверен, что только я не понимаю основы JavaScript должным образом. Но может ли кто-то указать на то, почему у меня сложилось впечатление, что мое утверждение if оценивается как истинное, при пузыре событий, даже если утверждение внутри оператора if должно оцениваться как ложное?
Кажется, что if(sFormula > 168) работает должным образом, когда я нажимаю тег html по одному, но если я быстро нажимаю на него, все кажется сумасшедшим.
Вот jsFiddle с кодом: http://jsfiddle.net/twimB/pGHrP/ и ниже - просто фрагмент целого.
Я был бы очень признателен, если бы кто-то нашел время, чтобы объяснить.
Благодарю.
Html
<a href="#" id="right">»</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 ;
}
});
1 ответ
.animate()
Метод не останавливает выполнение скрипта. Что происходит, так это то, что он запускает анимацию, а выполнение скрипта продолжается, и busy
немедленно устанавливается в false.
Вам нужно установить флаг только после завершения анимации с помощью функции обратного вызова:
if(rFormula > 168){
busy = true;
$(".block").animate({"left": "-=168px"}, "slow", function() { busy = false });
}
(Обратите внимание, что я также перенес установку флага здесь, потому что нет никакой пользы в установке его до начала анимации.)
Демо: http://jsfiddle.net/pGHrP/1/ (я обновил только правую кнопку.)