1

.each()这个想法是使用 jQuery函数在页面加载时从外部 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

笔记：

  1. 而不是$.ajax()在使用时document.write，我发现该函数被正确调用了 3 次，而变量fetch_id正确获取了数据。

  2. 使用示例数据检查外部 PHP 页面，只需将 POST 更改为 GET 并通过 GET 方法传递数据。有用。

编辑1：

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

4

1 回答 1

0

以下将通过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 循环后的多个元素而不展平为 HTML

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

于 2013-08-16T18:45:51.097 回答