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()使用する代わりに、変数fetch_idがデータを適切に取得document.writeして、関数が3回正しく呼び出されることがわかりました。

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

特記事項この問題を解決するには、次の方法を使用することを強くお勧めします。

HTMLにフラット化せずにforループの後の複数の要素に対するjQuery append()

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

于 2013-08-16T18:45:51.097 に答える