Question

我有一个脚本可以获取聊天记录并在用户端刷新它，以便为正在聊天的用户查看实时内容。但问题是，当我在开始时将滚动条拉到底部（正如大多数聊天应用程序那样）时，setTimeout函数会重新加载聊天，并且它会阻止用户向上滚动条。

        <script>
var currentID = null;
var chatTimer = null;

function fetch_data() {
  $.ajax({
    url: "select.php",
    method: "POST",
    success: function(data) {
      $('#live_data').html(data);
      //fetch_chat();
    }
  });
}

function fetch_chat() {
  $.ajax({
    url: "fetch_chat.php",
    method: "POST",
    data: {
      id: currentID
    },
    dataType: "text",
    success: function(data) {
      $("#messages").show();
      $('#messages').html(data);
      $("div.area").show();
     chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time 
             $('#messages').stop().animate({
                scrollTop: $('#messages')[0].scrollHeight
                }, 800);

    }

  });

}

$(document).ready(function() {

  $(document).on('click', '.first_name', function() {

    currentID = $(this).data("id1");
    //immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending
    clearTimeout(chatTimer);
    fetch_chat(); 
  });

  $("#sub").click(function() {
    var text = $("#text").val();

    $.post('insert_chat.php', {
      id: currentID,
      msg: text
    }, function(data) {
      $("#messages").append(data);
      $("#text").val('');
      $('#messages').animate({scrollTop: $('#messages').prop("scrollHeight")}, 500);
    });
  });

  fetch_data();//this will also trigger the first fetch_chat once it completes
});
</script>

我希望滚动条位于底部，但应该可滚动而不会损坏刷新消息div的代码。

Answer 1

尝试不重新加载所有聊天，但每次或每次添加新的按摩确保保存推迟阅读者的文件

想要刷新用户双方的聊天记录

1 个答案: