Laravel+Ajax加载更多评论：新评论引发重复及排序变动问题求解

首先得明确问题根源：你当前用skip/take的分页方式，依赖数据库中评论的顺序和数量稳定，但新评论发布（或评分变动改变排序）后，原有评论的位置会被打乱，导致skip的偏移量计算错误，重复加载已显示过的评论。

缓存已加载评论ID确实是非常合适的方案，甚至在动态排序场景下是最优选择之一，下面详细说明实现方式和优势：

一、具体实现步骤 #

1. 统一前后端排序逻辑 #

首先要修正AJAX接口的排序规则，必须和初始查询完全一致（你之前的AJAX代码漏掉了orderBy('removed','asc')，这会导致前后端排序不一致，也是潜在问题）：

public function loadMoreNewComments($submissionID, Request $request) {
    $submission = Submission::findOrFail($submissionID);
    if($request->ajax()) {
        // 接收前端传来的已加载评论ID数组
        $loadedIds = $request->input('loaded_comment_ids', []);
        
        $comments = $submission->comments()
            ->where('parent_id', NULL)
            ->whereNotIn('id', $loadedIds) // 核心：排除已加载的评论
            ->orderBy('removed','asc')
            ->orderBy('created_at', 'desc')
            ->take(10)
            ->get();
            
        return [
            'replies' => view('partials.comment_loop')
                ->with('submission', $submission)
                ->with('comments', $comments)
                ->render(),
            'new_ids' => $comments->pluck('id')->toArray() // 返回新评论ID，方便前端更新数组
        ];
    }
}

2. 前端维护已加载ID数组 #

在Blade视图中给每个评论元素添加ID标识，同时用JS维护已加载ID的数组：

{{-- 每个评论元素添加data属性 --}}
<div class="comment" data-comment-id="{{ $comment->id }}">
    {{-- 评论内容 --}}
</div>

// 初始化已加载ID数组
let loadedCommentIds = [];
document.querySelectorAll('.comment').forEach(comment => {
    loadedCommentIds.push(parseInt(comment.dataset.commentId));
});

// 点击加载更多的逻辑
document.querySelector('.load-more-btn').addEventListener('click', async () => {
    const submissionID = {{ $submission->id }};
    const response = await fetch(`/load-more-comments/${submissionID}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            loaded_comment_ids: loadedCommentIds
        })
    });
    
    const data = await response.json();
    // 插入新评论到页面
    document.querySelector('.comments-container').insertAdjacentHTML('beforeend', data.replies);
    // 更新已加载ID数组
    loadedCommentIds = [...loadedCommentIds, ...data.new_ids];
});

二、为什么这是最优方案？ #

对比其他方案，缓存已加载ID的优势非常明显：

1. 适配动态排序场景 #

当你切换到「最佳评分」排序后，评论的顺序会随评分变动而变化，传统的skip/take或游标分页（依赖固定排序字段值）都会失效——游标会因为评分变动导致定位错误，而缓存ID的方式直接排除已加载内容，不管排序怎么变都不会重复。

2. 逻辑简单可靠 #

不需要依赖数据库的偏移量或固定字段值，只要确保前后端排序规则一致，就能完全避免重复加载。Laravel的whereNotIn会自动处理参数绑定，不存在SQL注入风险。

3. 兼容性好 #

无论评论数量多少（只要不是上万级别的极端场景），ID数组的传输开销都可以忽略，前端维护成本也很低。

三、其他可选方案（仅适合固定排序场景） #

如果你的排序规则固定（比如只按时间排序），也可以用游标分页：

• 初始加载后记录最后一条评论的created_at和id（避免相同时间的评论冲突）
• 加载更多时，查询created_at < 最后时间或(created_at == 最后时间 AND id < 最后ID)的评论

但这种方案在动态排序（评分变动）场景下完全失效，因为评论的排序位置会随时变化，游标无法准确定位未加载的内容。

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