.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（）使頁面凍結

回答

相關問題