Ajax ожидают завершения анимации

Question

Я знаю, что эта тема обсуждалась ранее в stackoverflow. Но все результаты не помогут решить мою проблему.

Я использую «форму» JQuery плагин, как это:

$(document).ready(function() { 
$('#myForm').ajaxForm({ 
     data: { Ajax: '1' }, 
     beforeSubmit: beforeSEND, // pre-submit callback 
     success:  resultHANDLE // post-submit callback 
     }); 
    }); 

function beforeSEND() { 
    $('#myForm').fadeTo(0, 0.5); 
    $("textarea").addClass('loading'); 
    $("textarea").animate({backgroundPositionX: 0},1500}); 
} 

function resultHANDLE (responseText) { 
    // Do somethig with the result 
} 

В beforeSEND функционируют фон IMG прикрепляется к текстовой и движется слева направо. Кажется, что это индикатор прогресса.

Моя проблема сейчас: запрос Ajax срабатывает, и результаты обрабатываются независимо от того, закончилась анимация или нет. Как я могу заставить JavaScript ждать окончания анимации и отправить ПОСЛЕ этого запроса?

Большое спасибо за помощь!

Answer 1

Используйте «полный» обратный вызов из различных анимационных функций:

полный Тип: Function() Функция вызываемых после анимации полного

Вы могли бы сделать что-то вроде этого :

$('#myForm').fadeTo(0, 0.5, function() { 
    $("textarea").addClass('loading'); 
    $("textarea").animate({backgroundPositionX: 0}, 1500, function() { 
     $('#myForm').ajaxForm({ 
     data: {Ajax:'1'}, 
     success:  resultHANDLE 
     }); 
    }); 
    }); 
}); 

Answer 2

вы можете попробовать с .promise():

function setAjaxForm() { 

     $('#myForm').ajaxForm({ 
      data: { Ajax: '1' }, 
      beforeSubmit: beforeSEND, // pre-submit callback 
      success: resultHANDLE, // post-submit callback 
     }); 
    } 

    $('#myForm').fadeTo(0, 0.5).promise().done(function() { 

    $("textarea") 
     .addClass('loading') 
     .animate({backgroundPositionX: 0},1500) 
     .promise().done(setAjaxForm); 

    });