Ajax定时更新问题

Ajax timed update issue

本文关键字:新问题 更新 定时 Ajax      更新时间:2023-09-26

简单地说,我有一个带有动画通知徽章的菜单栏,由CSS制作,并由HTML上的SPAN类实现。此标记应该显示新消息的计数,如果计数为0则消失。我需要每隔1秒检查一次,但是运气不好。

我的js:

<script type="text/javascript">
function removeAnimation(){
setTimeout(function() {
$('.bubble').removeClass('animating')
}, 200);            
}
setInterval(function() {
$.ajax({
    type: 'GET',
    url:  'models/bubble.php',
    data: 'html',
    success: function(response){
    document.getElementById("bub").innerHTML=response;
    document.getElementById("bub").className = "bubble";
    }
    error: function(response) {
    document.getElementById("bub").className = "hidden";
    });
}
}, 1000);
</script>

my PHP (working and testing):

<?php
require_once("db.php");
$receiver = $this_user
$isnew = 1;
$stmt = $mysqli->stmt_init();
if ($stmt->prepare("SELECT * FROM messenger
    WHERE receiver = ? AND isnew = ? ORDER BY timestamp")) {
    $stmt->bind_param("si", $receiver,$isnew);
    $stmt->execute();
    $stmt->store_result();
    $ttlrows = $stmt->num_rows;
    $stmt->close();
}
echo $ttlrows;
?>

帮忙吗?

你需要在success内部再次调用函数,因为setTimeout/setInterval只会在你提到的延迟

之后调用函数一次。
setTimeout('pullNewMessageCount()', 100);

 function pullNewMessageCount() {
  var url = 'PHP Url';
  $.ajax({
    url: url,
    dataType: 'html',
    data:{
      "whatever data you want to send, skip it if not require",
    },
    type: 'POST',
    success: function(latestCount) {
      setTimeout('pullNewMessageCount()', 100);// Important comment (this what you need to do)
    },
    error: function(jqXHR, textStatus, errorThrown) {
    }
  });
}