AJAX вызывает зависание браузера, пока он получает ответ и успешно выполняет

Я делаю вызов AJAX для своего веб-сервера, который извлекает много данных. Я показываю загрузочное изображение, которое вращается во время вызова ajax, а затем исчезает.

то, что я заметил, заключается в том, что все браузеры на этом конкретном вызове сделают его невосприимчивым в течение примерно 7 секунд. При этом загрузочное изображение НЕ вращается как то, что я планировал, пока произошла выборка.

Я не знал, было ли это что-то, что происходит, или если есть способ, чтобы в каком-то смысле возникла вилка(), чтобы она делала что-то одно, а значок загрузки по-прежнему вращается.

МЫСЛИ? Идеи?

ниже - это код, который кто-то хотел увидеть:

$("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); но это не устраняет проблему, поэтому она, скорее всего, будет удалена.

Ответ 1

Так как JavaScript однопоточный, большая часть обработки синхронизации приведет к зависанию очереди событий и предотвращению выполнения другого кода. В вашем случае это цикл for, который блокирует браузер во время его выполнения.

То, что вы можете попробовать, это положить все ваши итерации в очередь событий.

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

Это должно исключать обработку, а не заставлять браузер завершать их все сразу. Функция самоиспускания заключается в создании замыкания для удержания значения счетчика циклов i.