Question

I’m using jQuery.getJSON(…) to make a call/process response for a slightly large data set. The response time being a couple of seconds is expected(there’s an animated loading graphic to placate the user).

All being said, the loading graphic, response, process, etc are working fine in all browsers. In Internet Explorer(6/7/8), however, the “Stop running this script” error appears. If allowed to proceed, the script completes with no issue.

$(document).ready(function() {
    $("#tree").treeview({ collapsed: true, animated: "slow" });
    $("#tree").hide();

    $("#loadingGraphic").fadeIn("slow");

    $.getJSON("mygenerichandler.ashx", function(data) {
        //manipulate data and add to treeview

        $("#loadingGraphic").fadeOut("slow", function() {
            $("#tree").slideDown("slow");
        });
    });
});

I realize this Internet Explorer has a preference you can set via the Windows registry, however, I’m curious how other developers handle expected large or slow responses back in an AJAX request.

Answer 1

The slow script notification most likely is not for the actual request, but for the script you are running to process the data received by the request. This could also be the jQuery code that parses your JSON.

If you post your script that is “manipulating the data” (i.e. the commented portion in your snippet), we could perhaps help in optimizing it.

[Edit] You’re right. You should consider lazy loading of the tree. How many root nodes do you usually have? You may have some luck taking the appendTo() out of the loop. Either build the whole HTML in one go and do a massive appendTo() or use an intermediate div not attached to the DOM to accumulate the nodes and then append to the main #tree element.

var tempDiv = $('<div></div>');
for (var i in data) {
    tempDiv.append($(buildHierarchy(data[i]));
}
$("#tree").append(tempDiv);
$("#tree").treeview({ add: tempDiv }); //don't know if this works? Maybe tempDiv.children() ?