jquery - 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 附加到 textarea 并从左向右移动。有点像进度条。

我现在的问题：无论动画是否完成，Ajax 请求都会触发并处理结果。如何强制 JavaScript 等待动画完成并在请求之后发送？

非常感谢您的帮助！！

Answer 1

使用来自各种动画函数的“完成”回调：

complete 类型：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);

  });