Question

我创建了一个用于在两个用户之间聊天的脚本。我希望滚动条转到底部（由大多数聊天应用程序完成），当用户再次输入新文本时，滚动条保持在最底部位置。但是也想每隔0.5毫秒刷新一次聊天框，以便它们实时发生在两个聊天用户身上。

        <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 fetchChat() { // 30% of chance of having new message
    if (Math.random() <= 0.3) {
        $("#messages").append("<div>" + "Random message " + Math.random() + "</div>");

        // Scroll to bottom if you are at bottom, with tolerance of 50px
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
            scrollToBottom();
        }
    }
}
function sendMessage(txt) {
    $("#messages").append("<div>" + txt + "</div>");
        $.post('insert_chat.php', {
            id: currentID,
            msg: txt
            }, function(data) {

            });
    scrollToBottom();
}

function scrollToBottom() {
    $(window).scrollTop(1e10); // Lazy hack
}

setInterval(function() {
    fetchChat();
}, 500);

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").animate({ scrollTop: $(document).height() }, "fast");
      // return false;
            if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
            scrollToBottom();
    }
}
  });
}



$(document).ready(function() {
 fetch_data();
  $(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(); 
  });

$("#text").keydown(function(e) {
    if (e.keyCode == 13) {
        sendMessage($("#text").val());
        $("#text").val("");
    }
})

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

这是脚本。我希望滚动条位于底部，但是当用户向上滚动以查找以前的消息时，它也应该可以工作，这在我的dont中我已经把它放在fetch_chat（）中。 Plz帮助我获得所需的输出。

Answer 1

这是你想要的吗？

function fetchChat() { // 30% of chance of having new message
    if (Math.random() <= 0.3) {
        $("#messages").append("<div>" + "Random message " + Math.random() + "</div>");
        
        // Scroll to bottom if you are at bottom, with tolerance of 50px
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
            scrollToBottom();
        }
    }
}

function sendMessage(txt) {
    $("#messages").append("<div>" + txt + "</div>");
    scrollToBottom();
}

function scrollToBottom() {
    $(window).scrollTop(1e10); // Lazy hack
}

setInterval(function() {
    fetchChat();
}, 500);

$("#input").keydown(function(e) {
    if (e.keyCode == 13) {
        sendMessage($("#input").val());
        $("#input").val("");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages"></div>
<input id="input" type="text"/>

如何执行setTimeout函数并同时滚动到底部

1 个答案: