Как заморозить кнопку «Пуск» во время анимации jquery

Question

Быстрый вопрос об анимации jquery ... Я сделал довольно длинную анимацию jquery (около 45 секунд), которая имеет много слоев setTimeout и обратных вызовов. Короче говоря, у меня большие проблемы, если кто-то нажимает кнопку «Пуск» во время работы анимации, потому что тогда он запустит новый цикл анимации, не останавливая старый, поэтому у меня будет два запущенных одновременно ... Вы видите проблему.

Существует ли какая-либо техника, которая позволила бы мне либо 1) заблокировать функциональность кнопки «Пуск» до завершения анимации, либо 2) остановить цикл анимации в середине и повторно инициализировать, если пользователь нажал «начало» Кнопка?

Заранее благодарен - любой совет будет ОЧЕНЬ признателен!

Answer 1

Когда вы запускаете анимацию, отключите кнопку, например

$('#yourbuttonid').attr("disabled", true);

Затем по полной анимации можно сдать кнопку

.

$('#continueButton').attr("disabled", false);

Answer 2

Вы можете добавить следующий код в обработчик нажатия вашей кнопки пуска:

if($(this).hasClass('disabled')) {
    return;
}
$(this).addClass('disabled');

Тогда вам просто нужно removeClass('disabled'), когда закончится анимация.

Answer 3

Вы можете установить флаг в начале анимации и удалить его в конце. Затем вы будете ссылаться на этот флаг, используя событие нажатия кнопки, чтобы определить, следует ли выполнить действие или нет.

$('.your-button').click(function( event ){
    if( flag == true )
        // do animation
    else
        event.preventDefault();
});