AJAX DivデータベースからjQuery.load経由でリフレッシュ

Question

データベースからプルするコンテンツのjQuery.accordionリストを生成するWordpressのプラグインを作成しました。また、jQuery.loadメソッドを使用して別のページ（update.php）を使用して5秒ごとに新しい結果をデータベースから取得しています。

私が遭遇している問題は、update.phpファイルのdivの完全なHTMLを生成していることです。私はそれがデータベースにクエリを行い、結果をメインファイルに返すように思えるかもしれませんが、私はそれをどうやって行うのかについてはわかりません。基本的に、ここでの私の懸念は効率です。私がやっているやり方では、ブラウザのリソースにかなり負担がかかるかもしれないからです。メモリ使用量が必然的にピークに達し、ブラウザがクラッシュするまで、この方法でメモリ使用量が増加し続けることがわかっています。

私はこれをより良くコード化する方法に関するガイダンスを探しています。私は以下の概念実証の例を提供していますので、建設的であれ批判的であれ、誰でもフィードバックを提供することが大好きです。ありがとうございました！

main.php：

<script type="text/javascript"> 
$(function() { 
    $("#accordion").load("update.php"); 
    var refresh = setInterval(function() { 
    $k("#accordion").load("update.php"); 
    }, 5000); 
}); 
</script> 

<div id="accordion"></div> 

update.phpを：

<?php 
function page_update() { 
    global $wpdb; 
    $out = ''; 

    $out .= '<script type="text/javascript" src="jquery-1.5.min.js"></script>'; 
    $out .= '<script type="text/javascript" src="jquery-ui-1.8.11.custom.min.js"></script>'; 
    $out .= '<script type="text/javascript"> 
      var $j = jQuery.noConflict(); 
      $j(function() { 
      $j("#accordion").accordion(); 
      }); 
      </script>'; 

    $sql = "SELECT * FROM table ORDER BY name DESC;"; 
    $results = $wpdb->get_results($sql); 

    foreach($results as $res) { 
    $out .= '<h3>'.$res->name.'</h3>'; 
    $out .= '<div id="content-'.$res->name.'">'.$res->score.'</div>'; 
    } 

    echo $out; 
} 

page_update(); 
?> 

Answer 1

1. あなたはグローバルなキーワードを使用しないでください。 Why?

2. すべてのaccordion divを再描画する前に、データベースに変更があるかどうかを確認する関数を作成する必要があります。変更がなければ、再描画する必要はありません。

3. 変更があった場合は、影響を受けた行のみを再描画できます。

Answer 2

私はそれが必然的にピークとブラウザがクラッシュするまでメモリ使用量は、この方法で上昇し続けるという予感を持っています。

update.phpの各実行がもう一度呼び出される前に完了するため、メモリ使用量が上昇し続けることはありません。ここでsetTimeOutの代わりにsetIntervalを使用して正しい選択をしました。この場合、setTimeOutはメモリリソースの効率が悪いでしょう。

setIntervalよりも効率的であるかどうかはわかりません。もっと効率的なものになるのは、5秒ごとではなく何かが変更された場合にのみリフレッシュするように設定した場合です。