javascript - 停止多个动画直到另一个动画完成

Question

多次单击按钮时停止多个动画，直到动画在以下代码的帮助下完成。
声明一个全局变量

var animateFinish = true;  

这里我从点击 Action 开始

$('#button').on('click', function(e){
    if(animateFinish){
        animateFinish = false;
        $('.selector').animate({'margin-left':'100px'},"fast",'linear',function(){  
             animateFinish = true;
        }
    }  
}

1.全局声明一个变量为 True (animateFinish)。
2.第一次满足条件。
3.马上修改为false。
4.完成动画后恢复。
5. 现在，如果你检查它，直到动画完成事件将不会动画。
对不起我的英语。

Answer 1

就您个人而言，我可能会使用全局变量 var busy = false，然后在您点击时添加:if(busy) return;否则忙=真；。在动画结束时，将 busy 设置为 false。这将阻止您的点击在一切完成之前执行任何操作。

这里有一个简短的片段可以说明我的意思:

/* I use each here so that `busy` is only applied to each div individually.
 * That way every individual element has it's own `busy`. */
$("div").each(function(){
    var busy = false;
    $(this).click(function(){
        /* Abort the click operation if busy is active*/
        if(busy) return; else busy = true;
        /* Run the animation and deactivate busy on callback. */
        $(this).animate({left: 500}, 2000).animate({left:0}, 2000, function(){
            busy = false;
        });
    });
});

div {
  position: absolute;
  left: 0;
  top:0;
  background: red;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div>Click me!</div>