jQuery$.get（异步）大文件块浏览器

我正在对html文件执行jQuery$.get，在success函数中，我对select块进行筛选，并将选项分离，将select的文本呈现为div中的段落，并将其附加到标记中。 获取和渲染选择需要一段时间（大约8000个），但我希望div一个接一个地出现，并让我处理它们（我使用.delegate…）为它们分配单击和悬停事件，但它们一次全部显示，并且我的浏览器窗口被阻止。 我甚至在$.get之前使用$.ajaxSetup显式地设置了async:true（这应该不是必需的，因为这是默认设置）。 我一定错过了一些基本的东西，但不知道是什么。。。

---

提前感谢您提供的想法和提示。

您应该将结果分小块加载。在伪代码中，它将是这样的：

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

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

否则，大多数浏览器，尤其是速度较慢的计算机上的浏览器，在尝试更新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);

服务器端脚本应执行以下操作：

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

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

---

你在一个select中有8000个元素？我个人在一个select中没有8000个元素/选项，我想让这个网站更漂亮、更实用（如果你想的话，可以在猪上涂口红）。我（最初）也会有大约8000个元素，但我想在它们上面设置过滤器和排序选项。我不能改变这个网站的代码——相信我，如果可以的话我会的……所以你说的不是ajax调用，而是8000个元素的插入阻碍了浏览器的运行？我有一台2.8GHz Intel Core Duo和4Gg内存的MacBook Pro，所以我不一定说这是一台速度很慢的电脑。我认为异步ajax调用和DOM操作的整体思想是不会阻塞浏览器窗口。我会试试你的建议——有没有办法把伪代码翻译成Javascript/jQuery？谢谢。是的，一次向页面添加大量DOM元素可以将其冻结几秒钟。异步调用仅在调用进行时防止浏览器冻结。实际的DOM插入不会异步执行。我将更新我的答案，将伪代码转换为真正的jQuery代码。>“您的服务器端脚本应该这样做：“这就是问题所在——没有服务器端脚本，或者至少目前没有一个我可以影响或更改的服务器端脚本。我唯一的界面是讨厌的html。我想我会把整个页面都吸进去，然后分块插入DOM。谢谢你的提示！“我想我会把整个页面都吸进去，然后分块插入DOM。”我实际上是想建议您这样做，因为在您的特定情况下，您将显示所有8000个元素，并一次获取所有元素，但在插入之间稍有延迟的情况下，将它们插入更小的块更有意义。顺便说一句，在StackOverflow中，向上推荐有用的答案是件好事…：）>“给有用的答案投票是件好事…：）”我知道。。。我只是仍然缺少这样做的必要声誉点。。。