AJAX setInterval错误

Question

kindly check sample here in this link: My test code

This will be used on a div on my actual site and had same problems. As you can see each 2 seconds the div blinks or in my test code site the whole page then when you scroll down it will scroll up automatically with the same time. Obviously it was caused by the setInterval.

Also I'm getting console error:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Is there any way to improve this?

Also, are there other ways to present updated list from database with ui in every second?

Here are my codes:

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

the script file

<?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

It is not a good idea to use interval to Ajax. Instead change to this:

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

or test if the data changed:

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();
});  

If you want the above to never stop, even when failing, use .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);
  });
}