使用闭包来保持活动的全局命名空间

Question

目前我有一些设置，用户点击图像并根据该图像，div将淡入/淡出。

如果用户发疯并同时点击一堆图像，则会加载多个div而不是最后一个请求。

我试图在这里说明我的问题。 http://jsfiddle.net/BBgsf/

单击其中任何一个图像将加载带有该编号的相应div。但是如果在动画完成之前单击不同的图像，它也会加载其他div。

的jQuery

$(".flow-chart img").click(function () {

    var div_class = $(this).data("class");

    $(".hide_show:visible").fadeOut('slow', function() {
        $("."+div_class).fadeIn("slow");
    });

});

HTML

<div class="1 hide_show">1</div>
<div class="2 hide_show" style="display: none">2</div>
<div class="3 hide_show" style="display: none">3</div>

如何防止多个div加载而不是一次加载一个？

Answer 1

虽然你已经有了答案..你可以检查是否有任何使用 :animated 选择器动画的元素..如果有返回false

$(".flow-chart img").click(function() {
    if ($(".hide_show").filter(':animated').length > 0) {
        return false;
    }
    var div_class = $(this).data("class");    
    $(".hide_show:visible").fadeOut('slow', function() {
        $("." + div_class).fadeIn("slow");
    });

});

http://jsfiddle.net/FaKBs/

Answer 2

执行此操作的一种方法是跟踪动画当前是否处于活动状态。这是一种简单的方法：http://jsfiddle.net/QCWgR/

var active = false;

$(".flow-chart img").click(function () {
    if (active) {
        return;
    }
    active = true;        
    var div_class = $(this).data("class");

    $(".hide_show:visible").fadeOut('slow', function() {
        // note the callback that sets active to false at end of animation
        $("."+div_class).fadeIn("slow", function() { active = false; });
    });

});

使用这种方法，第一次点击必须在下一次动作之前完成动画周期。

使用闭包来保持活动的全局命名空间

要保持活动的全局命名空间，你可以在匿名闭包中运行整个块，如下所示：

http://jsfiddle.net/QCWgR/2/

(function () {
    var active = false;

    $(".flow-chart img").click(function () {
        if (active) {
            return;
        }
        active = true;        
        var div_class = $(this).data("class");

        $(".hide_show:visible").fadeOut('slow', function() {
            $("."+div_class).fadeIn("slow", function() { active = false; });
        });

    });
})();

在动画完成之前，jQuery会阻止多次点击

2 个答案:

使用闭包来保持活动的全局命名空间