Question

下面是我的java脚本，用于在激活ajax时加载图像。

<script type="text/javascript">
        jQuery(function (){
            $(document).ajaxStop(function() {
                $("#ajax_loader").hide();
                //alert("end");
                console.log(new Date().getTime());
            });
            $(document).ajaxStart(function() {
                $("#ajax_loader").show();
                //alert("start");
                console.log(new Date().getTime());
            });
        });
    </script>

下面是我隐藏/显示的内容。

<div id='ajax_loader'
            style="position: fixed; left: 50%; top: 40%; color: red; font-size: 3em; display : none; zIndex : 1;">
            processing.....
        </div>

问题是当调用任何ajax时ajaxStart（）方法正在执行但它没有显示＆＃34; #ajax_loader＆＃34;内容。

请求仍然需要2到3秒才能响应。

但是如果我们在ajasStart（）方法中取消注释警告，那么它将启用＆＃34;＃ajax_loader＆＃34;内容。

有什么可以帮我解决这个问题吗？

Answer 1

如果不以异步方式执行ajax，就不可能有加载指示符和同步ajax。

这是因为浏览器渲染器被放入回调队列，而回调队列只在callstack为空时才被处理。同步ajax防止callstack在ajax完成之前清空，从而使得在页面完成之前不可能在页面上呈现任何内容。

一种解决方法是将ajax请求包装在setTimeout中，从而允许在发送ajax请求之前清除callstack，并使渲染器发生。但是，这不适用于ajaxStart，因为直到...你猜对了它才会被调用... ajax启动。这可能会破坏要求您将其作为同步请求的任何内容。

唯一真正的解决方案是不使用同步ajax并重构那些对你施加这种疯狂要求的代码。

async: true

Answer 2

这就像你写的那样运行得很好。当然，这假设AJAX操作是有效的。您可能希望在浏览器中打开开发人员面板并观察流量。

    //your part
    jQuery(function() {

        $(document).ajaxStop(function() {
            $("#ajax_loader").hide();
            //alert("end");
            console.log(new Date().getTime());
        });
        $(document).ajaxStart(function() {
            $("#ajax_loader").show();
            //alert("start");
            console.log(new Date().getTime());
        });
    });

    //my part
    jQuery(function() {
        $("#thebutton").click(function() {

            $.ajax({
                crossDomain: true,
                url: "/",
                success: function(e) {
                    var piece = $("<div></div>");
                    piece.html(e);
                    $("#log").append(piece);
                },
                error: function(e) {
                    //alert(e)
                }
            })
        });
    })

https://jsfiddle.net/8uhxh9uv/

.show（）在ajaxstart（）中不起作用

2 个答案: