如何防止 JQuery 排队（链接）答案

【问题标题】：How to prevent JQuery from queing (chaining)如何防止 JQuery 排队（链接）
【发布时间】：2011-05-05 01:25:20
【问题描述】：

场景：您可以单击一个按钮，一些内容将向左移动 (.animate)。当您快速单击按钮大约 3 次时，JQuery 会按顺序排列 3 .animate left's。

我不想要那个！我将阻止这种排队，因此该按钮仅在动画完成后才起作用。谢谢你的每一个 clou！

伪代码：

IF #内容没有动画（静止）

那么点击按钮

动画比赛 CSS“左”+ 900px

ELSE您现在无法点击该按钮。但是如果你点击按钮，那么它就不会出现另一个动画。

【问题讨论】：

标签： jquery conditional jquery-animate

【解决方案1】：

您可以使用the :animated selector 根据元素的动画状态运行代码。

if( $('#Content').is(':not(:animated)') ) {
    // run your animation
}

这也使用the :not() selector 和the .is() method 返回一个布尔值。

或者您可以在动画开始时向按钮添加一个类，并使用该类作为标志来确定动画是否应该运行。

该类还可以设置按钮样式以提供不应再次单击的反馈。

$('#myButton').click(function() {
    $button = $(this);
    if( !$button.hasClass( 'disabled' ) ) {
        $button.addClass( 'disabled' );
        $('#Content').animate({left: '+=900'}, function() { $button.removeClass('disabled') });
    }
});

【讨论】：

感谢大家的回复。你的第二个代码对我来说很好。谢谢。
以前从未见过.is。谢谢你教会了我一些新东西！

【解决方案2】：

你总是可以unbindclick 按下事件。然后将回调传递给animate，一旦动画完成，它将重新绑定click。

【讨论】：