AJAX 调用在获得响应并成功执行时会冻结浏览器一段时间

AJAX call freezes browser for a bit while it gets response and executes success

本文关键字：执行 冻结 一段时间 浏览器 成功 调用 响应 AJAX      更新时间：2023-09-26

我正在对我的网络服务器进行AJAX调用，该调用获取了大量数据。 我展示了一个加载图像，该图像在执行 Ajax 调用时旋转，然后逐渐消失。

我注意到的是，此特定调用中的所有浏览器都会使其在大约 7 秒内无响应。 话虽如此，加载图像并没有像我在获取发生时计划的那样旋转。

我不知道这是否发生了，或者是否有办法解决，从某种意义上说，有一个 fork（） 所以它做 1 件事，而我的加载图标仍然旋转。

思潮？ 想法？

下面是有人想看的代码：

$("div.loadingImage").fadeIn(500);//.show();
            setTimeout(function(){
            $.ajax({
                type: "POST",
                url: WEBSERVICE_URL + "/getChildrenFromTelTree",
                dataType: "json",
                async: true,
                contentType: "application/json",
                data: JSON.stringify({
                    "pText": parentText,
                    "pValue": parentValue,
                    "pr_id": LOGGED_IN_PR_ID,
                    "query_input": $("#queryInput").val()
                }),
                success: function (result, textStatus, jqXHR) {
                    //alert("winning");
                    //var childNodes = eval(result["getChildrenFromTelTreeResult"]);
                    if (result.getChildrenFromTelTreeResult == "") {
                        alert("No Children");
                    } else {
                        var childNodes = JSON.parse(result.getChildrenFromTelTreeResult);
                        var newChild;
                        //alert('pText: '+parentText+"'npValue: "+parentValue+"'nPorofileID: "+ LOGGED_IN_PR_ID+"'n'nFilter Input; "+$("#queryInput").val() );
                        //alert(childNodes.length);
                        for (var i = 0; i < childNodes.length; i++) {
                            TV.trackChanges();
                            newChild = new Telerik.Web.UI.RadTreeNode();
                            newChild.set_text(childNodes[i].pText);
                            newChild.set_value(childNodes[i].pValue);
                            //confirmed that newChild is set to ServerSide through debug and get_expandMode();
                            parentNode.get_nodes().add(newChild);
                            TV.commitChanges();
                            var parts = childNodes[i].pValue.split(",");
                            if (parts[0] != "{fe_id}" && parts[0] != "{un_fe_id}") {
                                newChild.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSide);
                            }
                        }
                    }
                    //TV.expand();
                    //recurseStart(TV);
                },
                error: function (xhr, status, message) {
                    alert("errrrrror");
                }
            }).always(function () {
                    $("div.loadingImage").fadeOut();
                });
                },500);

我的一位同事注意到了这个问题，并建议我添加一个setTimeout（function（）{..}，500）;但它不能解决手头的问题，所以它很可能会被删除。

由于 JavaScript 是单线程的，大量的同步处理会挂起事件队列并阻止其他代码执行。在您的情况下，是 for 循环在执行浏览器时锁定浏览器。

您可以尝试将所有迭代放入事件队列中。

for (var i = 0 ; i < childNodes.length ; i = i + 1) {
    (function(i) {
        setTimeout(function(i) {
            // code-here
        }, 0)
    })(i)
}

这应该会间隔处理，而不是强制浏览器一次完成所有处理。自执行函数用于创建一个闭包以保留循环计数器 i 的值。

相关文章：