Остановите несколько анимаций до завершения другой анимации

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. Сразу же оно изменяется как ложное.
4. После завершения анимации он возвращается.
5. Теперь, если вы проверите его, пока анимация не завершится, событие не будет анимировано.
Извините за мой английский.

Answer 1

Лично в вашем случае я могу перейти с глобальной переменной var busy = false, а затем добавить это на ваш клик: if(busy) return; else busy = true;. В конце вашей анимации установите busy на номер false. Это не позволит вашему клику ничего делать, пока все не будет завершено.

Heres быстрый фрагмент кода, который показывает, что я имею в виду:

/* 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>