.each（）使页面冻结

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

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

注：

而不是$.ajax()使用document.write，我发现塔t函数被正确调用3次，变量fetch_id正确获取数据。
使用示例数据检查外部PHP页面，只是将POST更改为GET并通过GET方法传递数据。有用。

编辑1：

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

来源

2013-08-16 Viswalinga Surya S

为什么你使用'.attr（ '数据ID' ）;'不''.attr（'id'）;'？ – Pitchinnate

仅供参考，jQuery的['load']（http://api.jquery.com/load/）函数旨在完成这些类型的事情。 –

@AmitHorakeri他很清楚**没有得到JSON（毕竟他用'.html'将它插入到DOM中）;你为什么要添加？ – mc10

下面将通过增加解决问题的所有html一次，这将是比其他方法快...它仍然会锁定在DOM结束时，增加了对html变量父的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

来源

2013-08-16 18:45:51 abc123

.each（）使页面冻结

回答

相关问题