asp.net-mvc - jQuery + Ajax +加载微调器图像=太快了!

我在ASP.NET MVC 2页面中使用jQuery。这是一个非常简单的帖子，可以获取日期作为回报。该过程本身运行非常快。我想使用微调图像向用户显示正在发生的事情。在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>

最佳答案

您可以在js中设置一个超时时间，这样可以确保直到超时时间结束后才会隐藏微调框：

    function HideLoadingSpinner() {
        $("#ajaxloader" + id).hide();
    }

然后用这个替换您的ajax调用：

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

如果由于计时器而出现奇怪的行为，还可以将成功回调中的其他逻辑移到HidingLoadingSpinner函数中。

关于asp.net-mvc - jQuery + Ajax +加载微调器图像=太快了!，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3468740/