基于jQuery+Ajax+PHP的私聊系统：切换用户时消息串扰问题求解

你遇到的问题核心在于每次点击新用户时，之前启动的定时刷新循环没有被终止。当你先点击用户A，代码会启动一个每隔5秒加载A消息的定时器；之后点击用户B，又会启动一个加载B消息的新定时器——这两个定时器会同时运行，当A的定时器触发时，就会把A的消息覆盖/混入到B的聊天窗口里。

我们需要做两个关键改动：

1. 用一个变量保存当前的定时器ID，每次点击新用户时先清除之前的定时器，避免多个刷新任务同时运行；
2. 可选但推荐：管理未完成的AJAX请求，防止旧请求延迟返回覆盖新内容。

修改后的完整代码 #

$(document).ready(function() {
    // 定义全局变量保存定时器ID和AJAX请求对象
    let refreshTimer;
    let activeAjaxRequest;

    $(" .getuser").click(function() {
        const currentUser = $(this).text();
        
        // 1. 清除之前的定时器，终止旧的刷新循环
        if (refreshTimer) {
            clearTimeout(refreshTimer);
        }

        // 2. 取消未完成的AJAX请求（如果有的话）
        if (activeAjaxRequest) {
            activeAjaxRequest.abort();
        }

        function load_comment() {
            // 保存当前AJAX请求对象
            activeAjaxRequest = $.ajax({
                url: "getMessage.php",
                method: "GET",
                data: { 'getvalue': currentUser },
                success: function(data) {
                    $('.chat-history').html(data);
                    // 滚动到底部
                    $("#bottom").get(0).scrollIntoView({ 
                        behavior: "smooth", 
                        block: "end", 
                        inline: "nearest" 
                    });
                },
                complete: function() {
                    // 请求完成后重置请求对象
                    activeAjaxRequest = null;
                    // 安排下一次刷新
                    refreshTimer = setTimeout(load_comment, 5000);
                }
            });
        }

        // 首次加载消息
        load_comment();
    });
});

关键改动说明 #

• refreshTimer变量：用来记录当前运行的定时器ID，每次点击新用户时调用clearTimeout(refreshTimer)，确保旧的刷新循环被终止；
• activeAjaxRequest变量：保存当前正在进行的AJAX请求对象，点击新用户时调用abort()取消未完成的请求，避免旧请求延迟返回后覆盖新的聊天内容；
• 将value改为currentUser并作为局部变量：确保load_comment函数始终使用当前点击用户的信息，避免闭包导致的变量引用问题；
• 把setTimeout移到complete回调里：确保只有当前AJAX请求完成后，才会安排下一次刷新，避免短时间内发送过多请求。

这样修改后，每次切换用户时，旧的刷新任务和未完成请求都会被终止，聊天窗口只会显示当前选中用户的消息啦！

内容的提问来源于stack exchange，提问作者kanayo Okoye