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

Question

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

var animateFinish = true;  

我从点击动作开始

$('#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; else busy = true; if(busy) return; else busy = true; 。 在动画结束时，将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>