asp.net-mvc - jQuery + Ajax + 加载旋转图像 = 太快了!

Question

我在 ASP.NET MVC 2 页面中使用 jQuery。这是一个 super 简单的帖子，可以得到一个日期作为返回。该过程本身运行得非常快。我想使用旋转图像向用户展示正在发生的事情。在 Firefox 中一切正常，在本地测试。然而，在 IE 8 中，旋转图像显示的时间不够长；它只是闪烁。如果最终用户看不到流程正在运行/完成的指示，这可能会让最终用户感到困惑。解决这个问题的最佳方法是什么？

谢谢。

 <img id="signedout<%: item.Id %>" src="/Content/Images/signed_out.png" alt="Signed Out" title="Signed Out" style="display:none" />
                <div id="ajaxloader<%: item.Id %>" style="display:none;text-align:center"><img src="/Content/Images/ajax-loader.gif" alt="loading..." title="loading..." /></div>

                <script type="text/javascript">
                    $(function () {
                        var id = "<%: item.Id %>";

                        $("#signout" + id).click(function () {
                            if (confirm("Are you sure you want to sign this visitor out?")) {

                                $(this).hide();
                                //$("#signout" + id).hide();
                                $("#ajaxloader" + id).show();

                                var url = '<%: Url.Action("signout") %>';

                                $.ajax({
                                    type: "POST",
                                    url: url,
                                    data: "id=" + id,
                                    success: function (result) {
                                        $("#timeout" + id).append(result);
                                        $("#ajaxloader" + id).hide();
                                        $("#signedout" + id).show();
                                        $("#row" + id).css("background", "#E8E8E8");
                                    },
                                    error: function () {
                                        alert("There was an unexpected error.  Please try again later.");
                                        $("#ajaxloader" + id).hide();
                                        $("#signout" + id).show();
                                    }
                                });
                            }
                        });
                    });   
                </script>

Answer 1

最好给出一些其他指示来表明该过程已完成，而不是在实际上没有处理任何内容时误导性地显示旋转器。不过你似乎对此已经下定决心了。

这是基于 amurra 的答案，旨在当且仅当超时已返回时，在加载进程后隐藏微调器。因此，如果 AJAX 请求返回“太快”，它将等待超时。

var timeoutComplete=false;
var requestComplete=false;

function HideLoadingSpinner() {
   if(requestComplete) {
      $("#ajaxloader" + id).hide();
   } else {
      timeoutComplete=true;
   }
}

同时，在点击处理程序内...

setTimeout(HideLoadingSpinner, 2000);

$.ajax({type: "POST",
   url: url,
   data: "id=" + id,
   success: function (result) {
      $("#timeout" + id).append(result);
      $("#signedout" + id).show();
      $("#row" + id).css("background", "#E8E8E8");
      if(timeoutComplete) {
         $("#ajaxloader" + id).hide();
      } else {
        requestComplete=true;
      }
   },
   error: function () {
      alert("There was an unexpected error.  Please try again later.");
      $("#ajaxloader" + id).hide();
      $("#signout" + id).show();
   }
});

编辑:我刚刚从error函数中删除了if(timeoutComplete)内容，因为会有一个alert 无论如何都在它之前。