jQuery $.get (async) 大文件阻塞浏览器

Question

我正在对 html 文件执行 jQuery $.get，在成功函数中，我过滤了一个选择块并将选项分开，将选择的文本呈现为 div 中的段落，并附加在我的标记中。 获取和呈现选择需要一段时间（大约有 8000 个），但我希望 div 一个一个显示并让我处理它们（我使用 .delegate 将单击和悬停事件分配给它们），但是它们一次全部显示出来，我的浏览器窗口被阻止了。 我什至在 $.get 之前使用 $.ajaxSetup 显式设置 async: true （这不是必需的，因为它是默认设置）。 我一定错过了一些基本的东西，但不知道是什么...... 提前感谢您的想法和提示。

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