jQuery $.get (async) big file blocks browser

Question

I am doing a jQuery $.get to a html file, and in the success function I filter on a select block and take the options apart, rendering the text of the selects as paragraphs in divs that I append in my markup. Getting and rendering the selects takes a while (there are about 8000) but I was expecting the div's to show up one by one and letting me work on them (I assign click and hover events to them with .delegate ...), but they show all up at once and my browser window is blocked. I even explicitly set async: true with an $.ajaxSetup before the $.get (which should not be necessary as it's the default). I must be missing something fundamental but have no idea what ... Thanks in advance for ideas and tips.

Answer 1

You should load the results in smaller chunks. In pseudocode 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, will freeze for a few 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