Почему javaScript / jQuery, похоже, игнорирует мой оператор IF при пузыре событий?

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

Кажется, что if(sFormula > 168) работает должным образом, когда я нажимаю тег html по одному, но если я быстро нажимаю на него, все кажется сумасшедшим.

Вот 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 ;
    }
});

1 ответ

Решение

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

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

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

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

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

Другие вопросы по тегам