.each() 使页面冻结答案

【问题标题】：.each() makes the page Freeze.each() 使页面冻结
【发布时间】：2013-08-19 04:39:35
【问题描述】：

这个想法是在页面加载时使用 jQuery .each() 函数从外部 PHP 文件中获取内容。问题是页面冻结或继续加载并且永远不会结束。会有什么问题？

PHP 页面

<div class='caller-div-holder'>

    <div class='calling-div' id='calling-div-1'></div>

    <div class='calling-div' id='calling-div-2'></div>

    <div class='calling-div' id='calling-div-3'></div>

</div>

在 .js 文件中

$('.calling-div').each(function()
{
   var fetch_id=$(this).attr('data-id');
   $.ajax(
   {
     type: "POST",
     url: "page-url",
     data: {var1: fetch_id},
     dataType:"html",
     success: function(data)
     {
       $('#calling-div-'+fetch_id).html(data);
     }
   }); // Ajax
}); // Each function

注意：

在使用 document.write 时，我发现该函数被正确调用了 3 次，而变量 fetch_id 正确获取了数据。
使用示例数据检查外部 PHP 页面，只需将 POST 更改为 GET 并通过 GET 方法传递数据。它有效。

编辑 1：

添加async:"false", 可降低问题强度。但是页面仍然相当慢。

【问题讨论】：

你为什么用.attr('data-id');而不是.attr('id');？
仅供参考，jQuery 的 load 函数正是用于执行这些类型的事情。
这是因为您正在每个循环内编辑DOM...而不是将这些保存到variable 并一次编辑DOM。
在紧密嵌套的 for 循环中编辑 DOM 将冻结 IE 中的 DOM，有时还会冻结 Chrome 和 Firefox 中的 DOM。 @pitchinnate 发生这种情况是因为您正在编辑用户看到的 DOM，然后它才能刷新视图以向用户显示它正在向 DOM 添加另一个元素...
@Pitchinnate 在这种情况下更困难，因为他没有生成整个部分 html。但是这个 SO 解决了问题stackoverflow.com/questions/13219094/…

标签： php jquery ajax each

【解决方案1】：

下面将通过一次添加所有html来解决问题，这将比其他方法更快...它仍然会在添加html变量时锁定DOM父元素的html。

var html = '';

$('.calling-div').each(function()
{
   var fetch_id=$(this).attr('data-id');
   $.ajax(
   {
     type: "POST",
     url: "page-url",
     data: {var1: fetch_id},
     dataType:"html",
     success: function(data)
     {
         html += "<div class='calling-div' id='calling-div-" + fetch_id + "'>" + data + "</div>"
     }
   }); // Ajax
}); // Each function

$('.caller-div-holder').html(html);

特别说明我强烈推荐使用以下方法来解决这个问题：

jQuery append() for multiple elements after for loop without flattening to HTML

http://jsperf.com/fn-append-apply

【讨论】：