Question

我做了一个简单的聊天。它运作正常，但表现不尽如人意。当用户提交消息时，应显示用户的姓名，时间和消息。

恰好用户名和响应首先出现，时间似乎是在稍微延迟后插入自己（这是滞后）。我无法弄清楚为什么，特别是因为响应是（或至少似乎是）作为一个整体发送，一旦从服务器发送响应就没有插入任何内容......

这是chat的链接。您可以输入虚拟用户名和虚拟消息。

以下是重要的代码：

PHP

while ($row = $result->fetch_assoc()) {
        $time = date('g:ia', $row['time']);
        echo "<p class=\"message\"><i>{$row['username']}</i> ($time): {$row['content']}</p>";
    }

的JavaScript

ajax.onreadystatechange = function () {
    if (ajax.status === 200 && ajax.readyState === 4) {
        document.getElementById('messagesArea').innerHTML = ajax.responseText;
    }
};

Answer 1

你的罪魁祸首是the script的这一部分：

var content = document.getElementById('messageBox').value;

if ( content === '') {
    return;
} else {
    var ajax = new XMLHttpRequest();
    var username = document.getElementById('signedin').innerHTML;

    document.getElementById('messageBox').value = '';

    ajax.open('POST', 'postmessage.php', true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function () {
        if (ajax.status === 200 && ajax.readyState === 4) {

            // if there are errors echoed from the PHP file
            if (ajax.responseText != "") {
                document.getElementById('mysqliError').innerHTML = ajax.responseText;
                return;
            }

            document.getElementById('messagesArea').insertAdjacentHTML('beforeend', '<p class="message"><i>' + username + '</i>: ' + content + '</p>');
        }
    };
    ajax.send('username=' + username + '&content=' + content);
}

请注意以下一行：document.getElementById('messagesArea').insertAdjacentHTML('beforeend', '<p class="message"><i>' + username + '</i>: ' + content + '</p>');

您正在将消息无时间插入#messagesArea。然后，在getRecentMessages之后，将其设置为从displaymessages.php获取整个聊天记录，并使用输出的内容覆盖#messagesArea，其中具有时间。

延迟只是AJAX响应的一部分

1 个答案: