通过 jQuery.load 从数据库刷新 AJAX div

Question

我为 Wordpress 编写了一个插件，它生成一个 jQuery.accordion 列表，其中包含从数据库中提取的内容。我还让它通过 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>

更新.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. 不应使用 global 关键字。 Why?

2. 在重绘所有手风琴 div 之前，您应该创建一个函数来检查数据库中是否有任何更改。如果没有变化，则无需重绘。

3. 如果有变化，您可以只重绘受影响的行。

Answer 2

我有一种预感，使用这种方法内存使用量会继续攀升，直到它不可避免地达到峰值并且浏览器崩溃。

内存使用不会继续攀升，因为 update.php 的每次执行都会在再次调用之前完成。您在这里使用 setInterval 而不是 setTimeOut 做出了正确的选择，因为在这种情况下 setTimeOut 对内存资源的效率会降低。

我不太确定它们是否比 setInterval 更有效。如果您将其设置为仅在某些情况发生变化时刷新而不是每 5 秒刷新一次，那么可能会更有效。