如何让基于setInterval的文件动画代码正常运行？

你的问题主要是浏览器图片缓存导致的，同时代码也有几个可以优化的小细节：

1. 核心原因：浏览器缓存机制 #

浏览器为了提升加载速度，会缓存已经请求过的资源（比如你的heart.png）。当你重复设置相同的图片URL时，浏览器不会重新向服务器请求新图，直接用缓存里的旧版本——这就是为什么手动刷新能看到新图（刷新会强制重新请求资源），但自动更新没效果。

2. 解决缓存的关键：让每次请求的URL唯一 #

给图片URL添加一个动态参数，比如时间戳或者随机数，这样每次请求的地址都不一样，浏览器就会认为是新资源，重新拉取。比如用当前时间的毫秒数：

document.getElementById("animation").src = "heart.png?t=" + Date.now();

Date.now()会生成当前时间的毫秒值，每次调用都不同，完美避免缓存问题。

3. 代码的其他优化点 #

• 你的setInterval间隔设为10ms，比后台更新图片的100ms快太多，完全没必要，反而会增加服务器和浏览器的负担。建议把间隔改成和后台同步的100ms（或者稍长一点，比如110ms，避免请求和更新不同步）。
• 变量id没有声明，会变成全局变量，可能引发意外冲突，建议用const声明：const id = setInterval(...)。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body onload="animate();">
<img id="animation">

<script>
  function animate() {
    // 用const声明变量，间隔设为100ms匹配后台更新频率
    const id = setInterval(frame, 100);
    function frame() {
      const imgElement = document.getElementById("animation");
      // 添加时间戳参数避免缓存
      imgElement.src = "heart.png?t=" + Date.now();
    }
  }
</script>

</body>
</html>

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