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/

动画完成后会触发回调。

因此，如果ajax请求的完成速度比淡出动画要快，请指出＆＃39; d＆＃39;将首先发生，然后指向＆＃39; 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;
});

Javascript没有按顺序运行

1 个答案: