JQuery $ .get (async) large file blocks browser

Question

I do jQuery $ .get in an html file, and in the success function, I filter on the selected block and separate the options, displaying the text of the selected paragraphs in divs that I add to my markup. Getting and rendering selected ones takes some time (there are about 8000 of them), but I expected the div to appear one after another and let me work on them (I assign click and hover events for them with .delegate ...), but they show everything immediately, and the browser window is locked. I even explicitly set async: true with $ .ajaxSetup before $ .get (which should not be necessary as it is by default). I have to miss something fundamental, but I have no idea what ... Thank you in advance for your ideas and advice.

Answer 1

You should load the results into smaller pieces. In pseudo code, it will be something like this:

loadDataUsingAjax(url, index) {
  load the first index to index + 250 items async using an ajax call;
  if there are still more items
     a few mili seconds later call loadDataUsingAjax(url, index + 500);
}

loadDataUsingAjax(url, 0);

Otherwise, most browsers, especially on slower computers, freeze for several seconds while they try to update the DOM.

UPDATE : actual jQuery code

var CHUNK_SIZE = 500;
var DELAY = 100;

function loadDataUsingAjax(ajaxUrl, index) {
  $.ajax({
    url: ajaxUrl,
    data: {startIndex: index, chunkSize: CHUNK_SIZE},
    dataType: 'json',
    success: function(response) {
      // response is in JSON format
      // convert it into HTML and add it to the appropriate location in the page
      // response.hasMoreResults indicates whether there are more items in the result set
      if (response.hasMoreResults) {
         setTimeout(function() {
            loadDataUsingAjax(ajaxUrl, index + CHUNK_SIZE);
         }, DELAY);
      }
    } 
  });
}
loadDataUsingAjax("yourUrl", 0);

Your server side script should do something like this:

startIndex = get the value of the startIndex request parameter;
chunkSize = get the value of the chunkSize request parameter;
// MySQL query
select ... from ... where ... limit startIndex, startIndex + chunkSize;
create a json result from the MySQL result set;
select count(...) from ... where ...;
if count(...) is > startIndex + chunkSize then set hasMoreElements = true