Question

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

$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。

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

1 个答案: