javascript - 无限循环将 Ajax 数据附加到 div

Question

我有一个 div 来制作一个通知框，只有在单击主菜单后才能看到该通知框。我正在从这个 notifi.php 文件中名为 shop 的表中获取数据:

$result = array();
$query = 'SELECT * FROM shop';
try { 
  $stmts = $db->prepare($query); 
  $results = $stmts->execute(); 
  if($results == true) {
    $done = true;
  }
} catch(PDOException $ex) { 
  die("Failed to run query: " . $ex->getMessage()); 
}

$row = $stmts ->fetchAll();
if($done) {
  foreach($row as $rows) {
    array_push($result, $rows); 
  }
  echo json_encode(array("result" => $result));
}

这会生成 JSON:

{
  "result": [
    {"id":"1","fruitname":"apple","cost":"200"},
    {"id":"2","fruitname":"banana","cost":"100"}
  ]
}

我有三列 - id、fruitname 和 cost - 所以 PHP 和 JSON 看起来不错。现在，使用 jQuery，我将该 JSON 编码数据添加到通知 div 中。这让我可以在数据库更新时更新我的​​ div 信息，而无需重新加载页面。一切都很好，直到我意识到我的 jQuery 代码似乎无限循环我的数据。

$(document).ready(function() {
  setTimeout(done,200);
});

function done() {
  setTimeout(function() {
    updates();
    done();
  }, 200);
}

function updates() {
  $.getJSON("notifi.php",function(data) {
    $.each(data.result,function() {
      $(".display_noti").append(
        "<span>From: "+this['fruitname']+"</span> <span>To: "+this['cost']+"<br><br></span>"
      );
    });
  });
}

.dispaly_noti 是我的 div 类，在其中，如您所见，我为 JSON 的每个元素附加一个 span数据。您能帮我看看是什么原因导致附加到我的 div 上的无限循环吗？

Answer 1

您的updates功能仅 appends到您的 div - 没有任何内容被删除 - 因此每隔 200 毫秒，您再次获取数据并添加一批新的 span到已经存在的东西。

要修复它，只需使用 empty ，这会清除元素的子元素，然后添加新一批数据。

function updates() {
  $.getJSON("notifi.php", function(data) {
    $(".display_noti").empty(); // Clear out the div
    $.each(data.result, function() { // Add each new element
      $(".display_noti").append(
        "<span>From: "+this['fruitname']+"</span> <span>To: "+this['cost']+"<br><br></span>"
      );
    });
  });
}

另一件事可能使这看起来像一个快速无限循环，因为您使用的是 Ajax，所以您可能会调用 done再次之前updates完成。 getJSON立即返回，updates然后返回，您调用 done再次，这将在 200 毫秒内将下一次迭代排入队列。如果您的服务器需要 300 毫秒才能响应，则计时器已经启动，并且已经有第二个请求正在运行。这只会让服务器陷入更多的瘫痪，从而使问题变得更加严重。要修复它，您可以 setInterval工作结束时updates相反，因此您保证一次只能发出一个请求。

function done() {
  setTimeout(updates, 200); // Call updates in 200ms
}

function updates() {
  $.getJSON("notifi.php", function(data) {
    $(".display_noti").empty();
    $.each(data.result, function() {
      $(".display_noti").append(
        "<span>From: "+this['fruitname']+"</span> <span>To: "+this['cost']+"<br><br></span>"
      );
    });
    done(); // The request came back and we're finished. Set a new timer.
  });
}

还有其他一些事情需要考虑:

• 200ms 相当快了。您可能希望减慢至 1000 毫秒或更长，除非您的数据库确实变化得如此之快并且您的服务器可以处理它。
• 您每次都会加载整个数据库内容。如果您跟踪上次获取数据的时间并且仅获取新项目，则将节省服务器和网络上的大量负载。在这种情况下，您不需要empty ，你可以只是append就像你现在一样。