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

jQuery $ .get（async）大文件阻止浏览器

1 个答案: