如何使用 Move.js 防止排队或禁用点击事件

Question

我一直在构建这个网站，该网站在点击时触发了几个元素的位置。 如果让序列运行，它工作得很好，但是如果您在面板滑动时开始快速单击，它很快就会变得混乱。

我正在使用 Move.js CSS3 动画脚本来创建动画，因为我发现它产生的效果比 jQuery animate 更流畅，但我似乎遇到了与 jQuery 相同的 queue（） 构建问题。

我尝试通过在动画运行时向主体添加一个类并在运行任何其他动画之前检查该类来解决此问题，但它尚未解决问题。

$('.bar').mouseenter(function() {
    if (pageinner.hasClass('closed')) {
        page = $(this).attr('data-page');
        href = "<?php echo get_site_url() ?>" + page;
        pageinner.load(href + ' #page');
        return false;
    }
}).mouseleave(function(){
    page = '',href = '';
});
$('#bar1').click(function(){
    if (body.hasClass('wait')) { return; }
    var c;
    if(this===previousTarget) {
        c = -(Math.round(pagewidth / 5));
        body.addClass('wait');
        run();
        History.back();
        pageinner.addClass('closed').children().remove();
        body.removeClass('page').addClass('home');
        body.removeClass('wait');
        previousTarget=null;
        return true;
    } else {
        c = Math.round(pagewidth / 5);
        body.addClass('wait');
        run();
        history.pushState({}, '', $(this).attr("data-page"));
        setTimeout(function(){
            body.removeClass('home').addClass('page');
            pageinner.removeClass('closed').show();
        },1000);
        body.removeClass('wait');
        previousTarget=this;
        return false;
    }
    function run() {
        move('#bar2')
            .ease('in-out').add('margin-left', c * 3)
            .duration(750)
            .end();
        move('#bar3')
            .ease('in-out').add('margin-left', c * 2)
            .duration(750)
            .end();
        move('#bar4')
            .ease('in-out').add('margin-left', c * 1)
            .duration(750)
            .end();
    }
});

每个元素都有自己的 Click 事件，类似于此示例。

Answer 1

您需要延迟删除"wait"类，直到动画完成。.end()函数可以采用回调函数，该函数将在动画完成后执行。您可以将其与 jQuery Deferred 对象的实例结合使用，以便在最后一个动画完成时执行代码。

您可以将run()函数更改为：

function run() {
    var deferred1 = $.Deferred(),
        deferred2 = $.Deferred(),
        deferred3 = $.Deferred();
    $.when(deferred1, deferred2, deferred3).done(function() {
        body.removeClass('wait');
    });
    move('#bar2')
        .ease('in-out').add('margin-left', c * 3)
        .duration(750)
        .end(function() { deferred1.resolve(); });
    move('#bar3')
        .ease('in-out').add('margin-left', c * 2)
        .duration(750)
        .end(function() { deferred2.resolve(); });
    move('#bar4')
        .ease('in-out').add('margin-left', c * 1)
        .duration(750)
        .end(function() { deferred3.resolve(); });
}