当 jQuery ajax 在 js 函数中调用时，动画在 IE 中不起作用

Question

当通过 javascript 调用单击按钮时，我正在尝试在内部显示带有 gif 动画的 div。但问题是，它只在 Firefox 中运行良好。在 IE 和 Chrome 中，动画不会显示。我试过用 alert("stop");在动画之前和之后，它确实可以工作，但是在我删除警报之后，它就不再工作了。请问有什么建议吗？

这是 TestPage.aspx 的 sn-p：

<div id="animationDiv" style="display: none;">
    <img src="loading.gif" />
</div>
...
<div>
    <asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
    var docWidth, docHeight;

    function testButtonClick() {
        var o_animationDiv = $("#animationDiv");

        o_animationDiv.width(docWidth);
        o_animationDiv.height(docHeight);
        o_animationDiv.show();

        $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: testAjaxSuccess,
            error: testAjaxError
        });

        function testAjaxSuccess(data, status, xhr) {
            // do something here
        };

        function testAjaxError(xhr, status, error) {
            // do something here
        };

        o_animationDiv.hide();

        return false;
    };

    $(document).ready(function () {
        docWidth = $(document).width();
        docHeight = $(document).height();
    });
//-->
</script>

这是 TestPage.aspx.cs 的 sn-p：

// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
    System.Threading.Thread.Sleep(5000); // 5 seconds

    // or do something else here
    // ie. if validation error, throw an exception

    return string.Empty;
}

更新 1：添加了一些 javascript 函数

Answer 1

你为什么不打电话.hide()发帖成功：

$.ajax({
  type  : "Post",
  url   : "TestPage.aspx/TestAjax",
  cache : false,
  data  : "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {

    // hide element when POST return as arrived,
    // meaning the "5 seconds" period has ended!
    o_animationDiv.hide();

  }
});

您可以在jQuery documentation! 阅读有关回调函数的信息！

Answer 2

jQuery ajax 是异步的，所以不会等待 ajax 结果再次隐藏。

 o_animationDiv.hide();
 o_animationDiv.show();

这些行是串行工作的，你看不到它是否正常工作。所以你应该等待ajax结果隐藏它。试试这个，

  $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function() {
            o_animationDiv.hide();
        });

更新：

抱歉，我错过了您创建同步 ajax 请求的要点。 但是已经有问题了。大多数浏览器在运行同步 XHR 时会自行锁定。这有时也会影响之前的进程。

• Here is a similar question

也许如果你使用beforeSend，你可以避免这个问题。

发送前

 A pre-request callback function that can be used to modify the jqXHR 
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent

试试这个，

$.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend : function() {
               o_animationDiv.show();
            }
        }).done(function() {
            o_animationDiv.hide();
        });

更新 2：

如果这不起作用，试试这个，

...
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();

setTimeout(function() {
        $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: testAjaxSuccess,
            error: testAjaxError
        }).done(function() {
            o_animationDiv.hide();
        });
}, 600);