javascript - 使用 jQuery AJAX 调用时，scrollTop() 函数会滚动到 AJAX 调用之前而不是之后的最新项目

Question

我正在构建一个简单的聊天页面供我的网站成员使用。该页面目前正在制作中；现在，我将页面设置为仅在用户发送消息时检查新的聊天消息。作为 jQuery 函数(包括 $.ajax 调用)的一部分，我使用了 StackOverflow 社区建议的一段代码来滚动到包含聊天的 div 底部，但该代码的行为“位于错误的一侧” $.ajax 调用。我的 HTML 在这里:

<div id="chat">

</div>

<form id="chat-input">
   <textarea form="chat-input" id="message" name="message" placeholder="Type your message here..." autofocus></textarea>
</form>

这是我的 jQuery:

   $('#chat-input').submit(function() {
           var new_chat = $('textarea[name=message]').val();//gets the value of the message box to send
           var most_recent_chat = $('.chat-item:last-child').attr('data-chat-id');//gets the id# of the last chat
           $.ajax({
                url: "/docs/chat/chat.php",
                dataType: 'html',
                type: "post",
                data: {
                    new_chat: new_chat,
                    most_recent_chat: most_recent_chat,
                    new_sender: new_sender //Declared globally elsewhere
                },
                success: function(data) {
                    $('#chat').append(data);
                },
                    error: function(jqXHR, exception) {
                    //switch containing various errors
                    }           
                }
            });

           var divHeight = document.getElementById('chat').scrollHeight;
           $('div#chat').scrollTop(divHeight);
           document.getElementById('message').value='';
           event.preventDefault();
       });

我的 PHP 脚本输出此信息(为了在启动时简单起见，我以 HTML 格式而不是 JSON 格式输出 - 稍后将升级为 JSON 输出):

<div class="chat-item" data-chat-id="(int)">//each chat has a unique id so that my php processing page only returns new chats
<p class="chat-message"><strong>(sender-name): </strong>(chat message)</p>
<p class="chat-time">(time of message)</p></div>

现在，针对我的具体问题。当我发送聊天消息时， $.ajax 调用工作正常。我的消息已到达并正确附加到 #chat div 中。然而，这些代码行的运行方式很有趣:

var divHeight = document.getElementById('chat').scrollHeight;
$('div#chat').scrollTop(divHeight);

我的#chat div 的固定高度为 400px，溢出设置为滚动。许多其他 Stack Overflow 问题表明上述代码将使 #chat div 滚动到底部，并且确实如此 - 有点。这些代码行似乎不是在 $.ajax 调用之后将 .scrollTop 设置为底部，而是在 $.ajax 调用之前将 .scrollTop 设置为底部(即，第二个最近的聊天显示在div 底部，显示最近的聊天内容但未滚动到)。该代码是表单 .submit() 函数的一部分，但位于 $.ajax 调用之后。当 jQuery 滚动到底部时，如何更改代码以包含新的聊天消息？

如果这很重要，我正在使用 AMPPS v3.5 和 PHP v5.3(我的网络主机仍然使用 5.3)，并且我正在 Firefox 46.0.1 中进行测试。

Answer 1

Ajax 调用是异步的。这意味着它们下面的代码将在调用挂起时执行。

所以你的scrollTop调用在ajax.success调用之前执行。

如果您希望在 ajax 调用收到响应后发生滚动，请将其包含在成功回调中。