jQuery $ .get (async) big file blocks browser

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.

UPDATE: Actual 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