Ajax定时刷新无页面重载时如何消除闪烁现象？

你的核心问题在于每次刷新时直接替换innerHTML，会导致元素内容先清空再填充，出现短暂空白从而产生闪烁。以下是几种实用的解决方法：

方法1：先准备新内容再替换，避免空白期 #

不要直接修改原元素的innerHTML，而是先在内存中创建临时元素渲染新内容，再一次性替换原元素的子节点，减少页面重绘的空白时间：

let app_capsule = document.getElementById("appCapsule")

// 移除全局的empty()，第一次加载会自动填充内容
load_messages = function(){
  $.ajax({
    url:"json/chat-content.php",
    method:"POST",
    data:{recipient_id:3},
    dataType: "JSON",
    success:function(resp) {
      console.log(resp);
      // 创建临时容器渲染新内容
      const tempContainer = document.createElement('div');
      tempContainer.innerHTML = `<div>${resp}</div>`;
      // 替换现有内容：如果原容器有子节点就替换，没有就直接添加
      if (app_capsule.firstChild) {
        app_capsule.replaceChild(tempContainer.firstElementChild, app_capsule.firstChild);
      } else {
        app_capsule.appendChild(tempContainer.firstElementChild);
      }
      
      setTimeout(load_messages, 3000);
    },
    error: function (data) {
      console.log(data);
    }
  });   
}
  
load_messages();

方法2：仅更新变化的内容 #

如果返回的内容大部分时候和当前内容一致，可以先对比新旧内容，只有当内容真正变化时才更新，避免不必要的DOM操作：

let app_capsule = document.getElementById("appCapsule")

load_messages = function(){
  $.ajax({
    url:"json/chat-content.php",
    method:"POST",
    data:{recipient_id:3},
    dataType: "JSON",
    success:function(resp) {
      console.log(resp);
      const newContent = `<div>${resp}</div>`;
      // 对比内容，不一致才更新
      if (app_capsule.innerHTML !== newContent) {
        app_capsule.innerHTML = newContent;
      }
      
      setTimeout(load_messages, 3000);
    },
    error: function (data) {
      console.log(data);
    }
  });   
}
  
load_messages();

方法3：用CSS过渡实现平滑切换 #

通过给容器添加透明度过渡效果，让内容切换更平滑，掩盖短暂的空白感：

首先添加CSS样式：

#appCapsule {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
#appCapsule.updating {
  opacity: 0;
}

然后修改JS代码，在请求开始时添加过渡类，完成后移除：

let app_capsule = document.getElementById("appCapsule")

load_messages = function(){
  // 请求开始时添加更新类，触发透明度过渡
  app_capsule.classList.add('updating');
  
  $.ajax({
    url:"json/chat-content.php",
    method:"POST",
    data:{recipient_id:3},
    dataType: "JSON",
    success:function(resp) {
      console.log(resp);
      app_capsule.innerHTML = `<div>${resp}</div>`;
      // 等待DOM渲染完成后再移除过渡类
      requestAnimationFrame(() => {
        app_capsule.classList.remove('updating');
      });
      
      setTimeout(load_messages, 3000);
    },
    error: function (data) {
      console.log(data);
      // 请求失败也要移除过渡类，避免容器一直透明
      app_capsule.classList.remove('updating');
    }
  });   
}
  
load_messages();

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