javascript - 如何在 Google Chrome 的 HTML 页面中管理多个 AJAX 调用的加载？

Question

我有加载 div 如下:CSS:

.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid gray;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

HTML:

<div class="loader"></div>
<div>
    <button onclick="generateOrder();">Create Order</button>
</div>

Javascript:

function generateOrder() {
     $('.loader').css('display', 'block');
     $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            url: oDataUri,
            data: jsonPO,
            async: false,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Accept", "application/json");
            },
            success: function (data, textStatus, XmlHttpRequest) {
                for (var i = 0; i < data.results.length; i++) {
                    AddProducts(data.results[i].ProductID, data.results[i].ProductName)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
        reloadGridData();   //it will call ajax and reload all data.
        $('.loader').css('display', 'none');                                                                        
}

function AddProducts(productID, productName) {
     //$('.loader').css('display', 'block');
     $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            url: oDataUri,
            data: jsonPO,
            async: false,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Accept", "application/json");
            },
            success: function (data, textStatus, XmlHttpRequest) {
                for (var i = 0; i < data.results.length; i++) {
                    //more AJAX call with async: false
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
        //$('.loader').css('display', 'none');
}

在上述情况下，加载在 Mozila Firefox 中工作正常，但当我尝试在 Google Chrome 中使用时，它不起作用。

我无法将 Async 设置为 True。我还有多个 Ajax 调用。

请建议我解决它。

Answer 1

为什么要注意使用 jQuery ajaxStart() 和 ajaxStop() 方法来运行您的代码。

ajaxStart Document

• 这是一个全局事件处理程序，只要发生 ajax 调用就会被触发。同样的原则也适用于 ajaxStop。您可以在谷歌中搜索 ajaxStop 以获取文档。非常易于使用。