javascript - 为什么 javaScript/jQuery 似乎忽略了我关于事件冒泡的 IF 语句？

Question

我确信只是我没有正确理解 JavaScript 基础知识。但是有人可以指出为什么我的印象是我的 if 语句在事件冒泡时评估为 true ，即使 if 语句内的语句应该评估为 false ？

当我一次按一次 html < a > 标签时，if(sFormula > 168) 似乎按预期工作，但如果我快速单击它，一切似乎都会变得疯狂。

这是一个 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 });
}

(请注意，我也将设置标志移至此处，因为在动画开始之前设置它没有任何好处。)

演示:http://jsfiddle.net/pGHrP/1/ (我只更新了右侧按钮。)