Question

我知道之前在stackoverflow上讨论过这个话题。但所有结果都无助于解决我的问题。

我使用像这样的“form”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);

  });

Ajax等待动画完成

2 个答案: