在CodeIgniter 4中使用Ajax jQuery无闪烁重载Div的问题

原问题回顾 #

• 初始代码运行时，数据变更或新增会导致所有数据重复显示
• 修改代码实现了预期更新逻辑，但仍存在数据获取时的页面闪烁问题

初始代码 #

<script>
    setInterval(function(){
      $.ajax({
        url: "<?php echo site_url(); ?>chat/user-list",
        cache : false,
        success: function(data){
            if(data != $("#usuarios_chat").html(data)){
                $("#usuarios_chat").replace(data);
            }else{
                $("#usuarios_chat").append(data);
            }
        },
      })
    },3000);
</script>

问题分析与修复 #

1. 解决重复显示问题

原代码的判断逻辑存在错误：$("#usuarios_chat").html(data)是直接执行设置内容的操作，返回的是jQuery对象而非当前容器的HTML内容，因此和data字符串比较永远不相等，导致每次都会执行替换/追加操作，最终造成重复。

正确的做法是先获取容器当前的HTML内容，再与新数据对比：

setInterval(function(){
  $.ajax({
    url: "<?php echo site_url(); ?>chat/user-list",
    cache : false,
    success: function(data){
        var currentContent = $("#usuarios_chat").html();
        // 仅当内容不同时才更新
        if (data !== currentContent) {
            $("#usuarios_chat").html(data);
        }
    },
  })
},3000);

2. 解决页面闪烁问题

闪烁源于DOM内容被直接替换时的重绘，可通过以下几种方式优化：

方法1：添加平滑过渡动画

给容器添加CSS过渡效果，让更新过程更柔和：

#usuarios_chat {
    transition: opacity 0.2s ease-in-out;
}

修改JS代码，利用过渡隐藏/显示内容：

success: function(data){
    var currentContent = $("#usuarios_chat").html();
    if (data !== currentContent) {
        $("#usuarios_chat").css('opacity', 0);
        // 等待过渡结束后更新内容并恢复透明度
        setTimeout(() => {
            $("#usuarios_chat").html(data).css('opacity', 1);
        }, 200);
    }
}

方法2：仅更新变化的内容（推荐）

如果后端可以返回结构化的JSON数据（而非直接返回HTML），前端只需要新增/修改变化的元素，避免替换整个容器，从根源减少DOM重绘：

success: function(userDataList){
    var $container = $("#usuarios_chat");
    // 记录现有用户的ID
    var existingUserIds = new Set();
    $container.find('.user-item').each(function() {
        existingUserIds.add($(this).data('user-id'));
    });

    // 遍历新用户数据，仅添加不存在的用户
    userDataList.forEach(user => {
        if (!existingUserIds.has(user.id)) {
            var userElement = `<div class="user-item" data-user-id="${user.id}">${user.name}</div>`;
            $container.append(userElement);
        }
    });
}

方法3：使用临时容器预渲染

先在隐藏的临时容器中渲染新内容，再一次性替换到目标容器：

success: function(data){
    var currentContent = $("#usuarios_chat").html();
    if (data !== currentContent) {
        var $temp = $('<div>').html(data);
        $("#usuarios_chat").html($temp.html());
    }
}

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