AJAX setInterval错误

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>
            ";

    }

?>

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

That error states that you are trying to make synchronous calls which is deprecated, you might have something like this in your code:

$.ajaxSetup({
   async: false
 });

either remove this or change it to true, to remove this error message.

About that scrolling and flickering issue:
for refreshing your news content you are refreshing your complete HTML, so your complete HTML loads again and again. Think it like this: you are climbing a ladder, and suddenly the ladder disappears and a new ladder appears? what will happen to you? you will fall back to the starting point i.e ground, scratching your head that what just happened?
Same thing is happening with scrolling, user scrolls through the news content and it suddenly reloads, and the user is back to starting point.

To solve this you have to refactor everything, you will have to append new news to the list, and will have to store some identifier to identify your last post, you will send this identifier to server, your server will then send only that data which is newer than that post and will also send an identifier to the latest post in response.