javascript - 禁用动画期间的点击

Question

我想在动画期间禁用对元素的单击，并在动画结束时再次启用它。这是代码:

$(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() {

                    });
                }

        });

Answer 1

您可以使用 off/on 来动态添加/删除事件 Hook ，但这可能会变得困惑。

我的首选方法是在元素上存储显示其状态的 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);
            });
        }
    }
});