JavaScript 未按顺序运行

Question

我的 javascript 在提交事件时未按顺序运行，有问题。 我有一个或多或少像这样的表格:

<form id="myForm">
  <div>
    <button type="submit" name="submit">Submit</button>
  </div>
  <div>
    <div id="loading" style="display:none;"><img src="images/loading.gif"/></div>
    <div id="hasil" style="display:none;"></div>
  </div>
</form>

和一个带有 ajax 的 javascript 函数:

$('#myForm').submit(function() {
  $('#hasil').fadeOut('fast', function() {
    alert('a');
    $('#loading').fadeIn('fast');
  });
  $.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(data) {
      if(data=='0'){
        $('#hasil').html('Code Already Exist');
        $('#loading').fadeOut('fast', function() {
          alert('d');
          $('#hasil').fadeIn();
        });
      }
    }
  });
  return false;
});

它应该显示#loading，隐藏#loading，然后显示#hasil。第一次提交，运行没有问题。但是当我第二次提交时，脚本不是从上到下有序运行，而是从点“d”，然后是“a”(alert())。

我想知道为什么脚本会这样运行？我是不是在某个地方犯了错误？

Answer 1

引用 jQuery API 文档:http://api.jquery.com/fadeout/

the callback is fired once the animation is complete.

因此，如果 ajax 请求的完成速度快于淡出动画，则点“d”将首先发生，然后点“a”。

可以将ajax请求放在淡出回调函数中来解决问题。

$('#myForm').submit(function(e) {
    $('#hasil').fadeOut('fast', function() {
        alert('a');
        $('#loading').fadeIn('fast');
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                if(data=='0'){
                    $('#hasil').html('Code Already Exist');
                    $('#loading').fadeOut('fast', function() {
                        alert('d');
                        $('#hasil').fadeIn();
                    });
                }
            }
        });
    });
    return false;
});