如何使用JavaScript/JQuery实现无闪烁自动刷新页面？

你的问题根源在于直接使用load()方法更新#content元素——这个方法会先清空目标元素的内容，再加载新内容，中间的空白期就导致了明显的闪烁。下面给你几个实用的解决方案，从简单到优化逐步递进：

方法1：使用临时容器预加载内容，再平滑替换 #

核心思路是先把新内容加载到一个隐藏的临时元素里，等内容完全加载后，再通过平滑过渡替换原元素的内容，从根源上避免直接清空带来的闪烁：

$(document).ready(function() {
  setInterval(refresh, 5000);
});

function refresh() {
  // 创建隐藏的临时div预加载新内容，不影响页面现有元素
  $('<div>', { style: 'display:none' }).load(window.location.href + " #content", function() {
    const newContent = $(this).html();
    // 先判断内容是否变化，避免无意义的刷新动画
    if ($("#content").html() !== newContent) {
      // 淡出原内容→替换→淡入新内容，过渡自然无闪烁
      $("#content").fadeOut(200, function() {
        $(this).html(newContent).fadeIn(200);
      });
    }
    // 加载完成后移除临时容器
    $(this).remove();
  });
}

方法2：简化版平滑过渡（适合内容加载极快的场景） #

如果你的内容加载速度非常快，也可以直接对原元素做「淡出→更新→淡入」的操作，虽然加载慢时可能有短暂空白，但实现起来更简单：

$(document).ready(function() {
  setInterval(refresh, 5000);
});

function refresh() {
  $("#content").fadeOut(200, function() {
    $(this).load(window.location.href + " #content", function() {
      $(this).fadeIn(200);
    });
  });
}

进阶优化：只请求必要的投票数据 #

上面的方法都是加载整个页面的#content片段，其实更高效的方式是单独写一个后端接口，只返回投票结果的更新数据（比如JSON格式的票数），再用JavaScript动态更新页面内容。这种方式不仅彻底避免闪烁，还能减少带宽占用和请求时间：

举个简单示例（假设后端接口/api/vote-results返回JSON数据）：

$(document).ready(function() {
  setInterval(refresh, 5000);
});

function refresh() {
  $.get("/api/vote-results", function(data) {
    // 假设data包含voteCount字段，更新按钮文本
    const currentText = $("#content").text();
    if (currentText !== data.voteCount.toString()) {
      $("#content").fadeOut(200, function() {
        $(this).text(data.voteCount).fadeIn(200);
      });
    }
  });
}

最后小提醒：你的HTML里#content是button元素，确保更新的是按钮的文本或内部合理元素，避免结构冲突哦。

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