HTML表格AJAX轮询重复添加行问题求助

问题现象 #

页面每2秒查询新帖子，但存在两个问题：

• 无新帖子时，会重复添加已有的旧行
• 其他用户连续发送两条消息时，JavaScript每2秒重复添加这两行

核心原因 #

1. 前端重复判断逻辑错误：直接比较jQuery对象$(data) != $("#tableContainer tr:last")无效，即使内容相同，不同DOM对象的比较结果永远为真
2. 多条新帖子处理不当：未遍历所有返回的新行，且lastPostId更新不及时，导致下次请求重复获取同一批新帖子

修复方案 #

1. 简化Twig模板循环逻辑 #

原模板中重复的行判断可以简化，避免冗余代码：

<table style='border: 1px solid black' id="tableContainer">
    <tr style='border: 1px solid black'>
        <th>id</th>
        <th>wiadomość</th>
        <th>godzina</th>
        <th>nazwa użytkownika</th>
    </tr>
    {% set previousId = null %}
    {% for post in posts %}
        {% if post.id != previousId %}
            <tr style='border: 1px solid black' id="post_{{ post.id }}">
                <td>{{ post.id }}</td>
                <td>{{ post.text }}</td>
                <td>{{ post.time|date('Y-m-d H:i:s') }}</td>
                <td>{{ post.getUserId().getUsername() }}</td>
            </tr>
            {% set previousId = post.id %}
        {% endif %}
    {% endfor %}
</table>

2. 修正前端JavaScript逻辑 #

通过帖子ID判断是否重复，同时处理多条新帖子的情况：

$(document).ready(function(){
    // 初始化lastPostId，兼容表格仅含表头的情况
    var $lastRow = $("#tableContainer tr:last");
    var lastPostId = $lastRow.attr("id") ? parseInt($lastRow.attr("id").split("_")[1]) : 0;

    setInterval(function(){
        $.ajax({
            url: "{{ path('showTable') }}",
            type: 'GET',
            data: { lastPostId: lastPostId },
            success: function(data) {
                // 空内容直接返回，避免无效处理
                if (!data.trim()) return;

                var $newRows = $(data);
                $newRows.each(function() {
                    var rowId = $(this).attr("id");
                    var currentPostId = parseInt(rowId.split("_")[1]);
                    
                    // 检查当前表格中是否已存在该行，不存在则添加
                    if (!$("#tableContainer #" + rowId).length) {
                        $('#tableContainer').append(this);
                        // 更新lastPostId为最大的新帖子ID
                        if (currentPostId > lastPostId) {
                            lastPostId = currentPostId;
                        }
                    }
                });
            }
        });
    }, 2000);
});

3. 后端接口注意点 #

确保showTable接口仅返回ID大于lastPostId的所有帖子对应的HTML行，且每行的id属性严格为post_{帖子ID}，保证唯一性。

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