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

I am doing an AJAX call to my webserver which fetches a lot of data. i show a loading image that spins while the ajax call is executed and then fades away.

the thing i have noticed is that all of the browsers on this particular call will make it non-responsive for about 7 seconds. That being said, the loading image is NOT spinning as what i had planned while the fetch was occurring.

I did not know if this was something that happens or if there is a way around to, in a sense cause there to be a fork() so that it does 1 thing, while my loading icon still spins.

THoughts? Ideas?

below is the code as someone wanted to see it:

                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) {
                    //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() );
                        for (var i = 0; i < childNodes.length; i++) {
                            newChild = new Telerik.Web.UI.RadTreeNode();
                            //confirmed that newChild is set to ServerSide through debug and get_expandMode();
                            var parts = childNodes[i].pValue.split(",");
                            if (parts[0] != "{fe_id}" && parts[0] != "{un_fe_id}") {
                error: function (xhr, status, message) {
            }).always(function () {

A corworker of mine noticed this issue, and suggested i add a setTimeout(function(){..},500); but it does not fix the issue at hand, so it will most likely be removed.


Since JavaScript is single threaded, a lot of sync processing will hang up the event queue and prevent other code from executing. In your case, it's the for-loop thats locking up the browser while it's executing. What you can try is putting all your iterations into your event queue.

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

This should space out the processing and not force the browser to finish them all at once. The self executing function is there to create a closure to hold on to the value of the loop counter i.

Need Your Help

How to randomize a vector

r vector random shuffle

I would like to randomly reorganize the order of the numbers in a vector, in a simple one-line command?