ajax调用阻止前面的DOM事件

Question

我的问题可能与其他问题类似，但我找到的答案都没有解决这个特别的“怪癖”

DOM如何与我遇到问题的ajax进行交互。

我有一个包含javascript/JQuery个功能的网页，当用户点击某个特定按钮时，

我正在尝试将“loading .... pease wait”动画gif（或文字）出现在div中

(using $("#mydiv").show or document.getElementById("mydiv").style.display = "block"),

然后调用执行ajax post到php函数的主处理函数（函数2）来获取函数继续处理的数据。

如果没有post，加载图形将按预期显示，并在预期时（在调用函数2之前）显示。当我输入ajax调用时，图形不会出现（甚至是纯文本或警告框......基本上看起来DOM上没有任何变化）直到ajax帖子完成处理之后，即使节目在 ajax post命令之前，命令被称为。

我已经尝试了所有我能找到的东西，包括beforeSend和ajaxSetup，将函数包装等等......但似乎没有任何帮助。我想了解ajax为什么以及如何停止在ajax调用之前调用的DOM更改函数，以及是否有解决方法。

我应该提到我正在使用"async:false"。为了避免关于这是一个如此糟糕的想法的所有评论，我使用ajax的唯一原因是有办法从javascript访问我的PHP代码，我实际上需要在继续之前返回结果javascript函数，它将我与使用同步调用联系起来（即使这不是最好的处理方式，

我正在使用继承的代码，所以我的选项在这一点上是有限的）。如果没有ajax的所有开销，还有另一种方法可以做到这一点，我全都听见了。

感谢您的帮助。

function mainfunc(){

    function getcomparedata(){
        var returndata = null;
        $.ajaxSetup({async:false});
        $.post("rostercomparematch",{clever_district_id:clever_dist_id, sa_district_id:sa_dist_id}).done( function(data){returndata = data;});
        $.ajaxSetup({async:true});
        return returndata;
    }

var compare = null;
$("#mydiv").show();  //OR document.getElementById("mydiv").style.display = "block" OR $("#mydiv").text("please wait") OR alert("function called") OR..........
compare = getcomparedata();
//keep processing with compare......
}

$("#button_do_match").click( function(){  event.preventDefault();  /*$("#mydiv").show(); - TRIED SHOWING THE DIV HERE ALSO*/  mainfunc(); });  

Answer 1

jQuery＆＃39; show有一个complete回调。在其中执行您的ajax调用，这样动画就会完成，然后您就会发布您的请求。

显然，使用AJAX的异步部分会更好，你不会遇到这个问题。