jQuery $ .get (async) браузер больших файловых блоков

Question

Я делаю jQuery $ .get для html-файла, и в функции успеха я отфильтровываю блок выборки и разбираю параметры, визуализируя текст выборок как абзацы в div, которые я добавляю в мою разметку.Получение и рендеринг отборов занимает некоторое время (их около 8000), но я ожидал, что элементы div будут отображаться один за другим и позволят мне поработать над ними (я назначаю им события click и hover с помощью .delegate ...), ноони отображаются сразу, и окно моего браузера заблокировано.Я даже явно установил async: true с $ .ajaxSetup перед $ .get (что не обязательно, так как это значение по умолчанию).Я, должно быть, упускаю что-то фундаментальное, но понятия не имею, что ... Заранее спасибо за идеи и советы.

Answer 1

Вы должны загружать результаты меньшими порциями. В псевдокоде это будет примерно так:

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);

В противном случае большинство браузеров, особенно на медленных компьютерах, будут зависать на несколько секунд при попытке обновить DOM.

ОБНОВЛЕНИЕ : Фактический код jQuery

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);

Ваш серверный скрипт должен сделать что-то вроде этого:

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