title: How to know if AJAX has fetched a new data?
body: <p>I'm making a chatting website. I use AJAX to fetch the chat messages ever 2 seconds. I also use a scrollTop: to auto scroll the page upon data load. But i can't seem to figure out how to only auto scroll when a new message has arrived not every 2 seconds.</p>
  
  <pre><code>$('.contact').click(function() {
  $('.cont').not(this).removeClass('active');
  $(this).toggleClass('active');
  sendRequest();
  function sendRequest(){
  var convo_id=document.getElementById("convo_id").value;
   $.ajax({
    cache: false,
    type: "POST",
    url: 'show_chat.php',
    data: ({convo_id: convo_id}),
    success: function(response) {
    $('#chatgoeshere').html(response);
    $(".messages").animate({ scrollTop: $(document).height() }, "fast");},
      complete: function() {
     // Schedule the next request when the current one's complete
     setTimeout(sendRequest, 2000); // The interval set to 5 seconds
     }
     });
     };
     });
  </code></pre>
  
  <p>Thank you</p>