Javascript 在动画期间禁用单击

我想在动画期间禁用对元素的单击，当动画结束时，再次启用它。代码如下：

$(document).on('click touchstart', '.slot1-up', function(e){
                e.preventDefault();

                firstSlotPos = parseInt($(".jSlots-wrapper:nth-child(1) .slot").css('top'));
                console.log(firstSlotPos)
                if (firstSlotPos < -309) {
                    $(".jSlots-wrapper:nth-child(1) .slot").stop(true,true).animate( { 'top' : firstSlotPos  + 310 + "px" },600, 'easeInOutSine', function() {

                    });
                }

        });

$（文档）.on（'click touchstart'，'.slot1 up'，函数（e）{
e、 预防默认值（）；
firstSlotPos=parseInt（$（“.jSlots包装器：第n个子（1.slot”）.css（'top'））；
console.log（firstSlotPos）
如果（第一个插槽操作系统<-309）{
$（“.jSlots包装器：第n个子（1.slot”）.stop（true，true）。动画（{'top'：firstSlotPos+310+“px”}，600，'easeInOutSine'，function（）{
});
}
});

您可以使用

off

/

on

动态添加/删除事件挂钩，但这可能会变得混乱

我的首选方法是在显示其状态的元素上存储

data

属性。由此，您可以确定是否允许执行处理程序函数。大概是这样的：

$(document).on('click touchstart', '.slot1-up', function(e){
    e.preventDefault();
    var $el = $(this);
    if (!$el.data('animating')) {
        var $slot = $(".jSlots-wrapper:nth-child(1) .slot");
        $el.data('animating', true);
        firstSlotPos = parseInt($slot.css('top'));
        if (firstSlotPos < -309) {
            $slot.stop(true,true).animate({ 'top' : (firstSlotPos + 310) + "px" }, 600, 'easeInOutSine', function() {
                $el.data('animating', false);
            });
        }
    }
});

$（文档）.on（'click touchstart'，'.slot1 up'，函数（e）{
e、 预防默认值（）；
var$el=$（本）；
如果（！$el.data（‘动画’））{
var$slot=$（“.jSlots包装器：第n个子（1.slot”）；
$el.data（'动画'，真）；
firstSlotPos=parseInt（$slot.css（'top'））；
如果（第一个插槽操作系统<-309）{
$slot.stop（true，true）.animate（{'top'：（firstSlotPos+310）+“px”}，600，'easeInOutSine'，function（）{
$el.data（'动画'，false）；
});
}
}
});

您可以使用

off

/

on

动态添加/删除事件挂钩，但这可能会变得混乱

我的首选方法是在显示其状态的元素上存储

data

属性。由此，您可以确定是否允许执行处理程序函数。大概是这样的：

$(document).on('click touchstart', '.slot1-up', function(e){
    e.preventDefault();
    var $el = $(this);
    if (!$el.data('animating')) {
        var $slot = $(".jSlots-wrapper:nth-child(1) .slot");
        $el.data('animating', true);
        firstSlotPos = parseInt($slot.css('top'));
        if (firstSlotPos < -309) {
            $slot.stop(true,true).animate({ 'top' : (firstSlotPos + 310) + "px" }, 600, 'easeInOutSine', function() {
                $el.data('animating', false);
            });
        }
    }
});

$（文档）.on（'click touchstart'，'.slot1 up'，函数（e）{
e、 预防默认值（）；
var$el=$（本）；
如果（！$el.data（‘动画’））{
var$slot=$（“.jSlots包装器：第n个子（1.slot”）；
$el.data（'动画'，真）；
firstSlotPos=parseInt（$slot.css（'top'））；
如果（第一个插槽操作系统<-309）{
$slot.stop（true，true）.animate（{'top'：（firstSlotPos+310）+“px”}，600，'easeInOutSine'，function（）{
$el.data（'动画'，false）；
});
}
}
});

只需使用伪选择器进行检查：

$（文档）.on（'click touchstart'，'.slot1 up'，函数（e）{
e、 预防默认值（）；
//如果已设置动画，则返回{undefined}
if（$（“.jSlots包装器：第n个子（1.slot”）.is（“：animated”）返回；
firstSlotPos=parseInt（$（“.jSlots包装器：第n个子（1.slot”）.css（'top'））；
如果（第一个插槽操作系统<-309）{
$（“.jSlots包装器：第n个子项（1）.slot”）.stop（true，true）.动画({
“顶部”：firstSlotPos+310+“px”
}，600，'easeInOutSine'，函数（）{
});
}
});

只需使用伪选择器进行检查：

$（文档）.on（'click touchstart'，'.slot1 up'，函数（e）{
e、 预防默认值（）；
//如果已设置动画，则返回{undefined}
if（$（“.jSlots包装器：第n个子（1.slot”）.is（“：animated”）返回；
firstSlotPos=parseInt（$（“.jSlots包装器：第n个子（1.slot”）.css（'top'））；
如果（第一个插槽操作系统<-309）{
$（“.jSlots包装器：第n个子项（1）.slot”）.stop（true，true）.动画({
“顶部”：firstSlotPos+310+“px”
}，600，'easeInOutSine'，函数（）{
});
}
});