Question

请在此链接中查看示例：My test code

这将在我的实际网站上使用div并遇到同样的问题。正如你所看到的那样，div每2秒闪烁一次，或者在我的测试代码网站中看到整个页面，然后当你向下滚动它时会自动同时向上滚动。显然它是由setInterval引起的。

我也遇到了控制台错误：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看http://xhr.spec.whatwg.org/。

有没有办法改善这个？

此外，是否有其他方法可以每秒使用ui从数据库中显示更新列表？

以下是我的代码：

<div id="container"></div>
<script>
    function refreshNews()
    {   $.get('../php/ajaxreportall.php').success(function(data){
             $("#container").html(data);
        })
    }
    refreshNews();
    setInterval(refreshNews, 2000);
</script>

脚本文件

<?php 
    require("database.php");

    $sql = "SELECT * from Report r inner join reddb.User_Info u 
            on u.user_email = r.user_email ";

    $res = odbc_exec($conn,$sql);

    echo "
            <link rel='stylesheet' type='text/css' href='../css/homelayout.css'>
            <script src='../js/home.js'></script>
        ";

    while($feedItem = odbc_fetch_array($res))
    {
        echo "
            <div class='feedItem'>
                <div>Report No. <label class='feedItemRepID'>" . $feedItem['report_id'] . "</label></div>
                <div>Name:  <label>" . $feedItem['firstname'] . "</label></div>
                <div>Contact No: <label>" . $feedItem['contact'] . "</label></div>
                <div>Details:  <label>" . $feedItem['report_detail'] . "</label></div>
                <div>Date: <label>" . $feedItem['date_report'] . "</label></div>
                <div class='buttons'>
                    <button class='btn btn-success btnRespond' data-toggle='modal' data-target='#myModal'>Respond</button>
                </div>
            </div>
            ";

    }

?>

Answer 1

将间隔用于Ajax并不是一个好主意。而是改为：

function refreshNews() {   
  $.get('../php/ajaxreportall.php').success(function(data){
    $("#container").html(data);
    setTimeout(refreshNews, 2000);
  });
}
$(function() {
  refreshNews();
});

或测试数据是否发生变化：

var rfn="";
function refreshNews() {   
  $.get('../php/ajaxreportall.php').success(function(data){
    if (rfn!=data) {
      $("#container").fadeOut(function() {
        $("#container").html(data);
        $("#container").fadeIn();
      });
      rfn=data;
    }
    setTimeout(refreshNews, 2000);
  });
}
$(function() {
  refreshNews();
});

如果您希望上述内容永远不会停止，即使失败，请使用.always

function refreshNews() { 
  var jqxhr = $.ajax('../php/ajaxreportall.php')
  .done(function(data){
    if (rfn!=data) {
      $("#container").fadeOut(function() {
        $("#container").html(data);
        $("#container").fadeIn();
      });
      rfn=data;
    }
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    setTimeout(refreshNews, 2000);
  });
}

Answer 2

该错误表明您正在尝试进行已弃用的同步调用，您的代码中可能会出现类似的情况：

$.ajaxSetup({
   async: false
 });

删除此项或将其更改为true，以删除此错误消息。

关于滚动和闪烁的问题：
要刷新您的新闻内容，您需要刷新完整的HTML，以便一次又一次地加载完整的HTML。这样想：你爬梯子，突然梯子消失了，一个新的梯子出现了？会发生什么事？你会回到起点，即地面，抓挠你刚刚发生的事情？
滚动时也会发生同样的事情，用户滚动浏览新闻内容并突然重新加载，用户又回到了起点。

要解决此问题，您必须重构所有内容，您必须将新消息附加到列表中，并且必须存储一些标识符以标识您的上一篇文章，您将此标识符发送到服务器，您的服务器将只发送该数据比该帖子更新，并且还会向最新帖子发送一个标识符作为响应。

AJAX setInterval错误

2 个答案: