javascript - 如何在替换图像时使用 AJAX 刷新 DIV？

Question

我有一个在线广播电台，我想显示每首歌曲的专辑图片。由于我能够通过 ftp 自动将当前播放歌曲的图片 (artwork.png) 上传到网络服务器，我制作了在 html 页面上显示图像的脚本..

我的代码:

<div id="auto">
  <img id="artwork" src="artwork.png"></img>
</div>

function refresh() {
  setTimeout (function() {
    var timestamp = new Date().getTime();
    $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');

    refresh();
  }, 1000);
}

$('#artwork').attr('src', 'artwork.png?timestamp=' + new Date().getTime());

除了自动刷新外，一切都很好，所以我必须手动刷新页面以加载新的替换图像。但我希望每当上传新图像时在 div 上进行一次刷新，仅此而已。 refresh();

的问题在哪里

Answer 1

首先，方法 refresh() 没有在您的代码段中的任何地方被调用，因此您需要先调用它。

其次，最好使用 setInterval而不是 setTimeout

无需调用 setTimeout 中的 refresh() 方法，因为它会在每次调用时重新附加 setTimeout 方法，尽管它不会伤害您的程序员，但如果您想要每秒调用一段程序然后你应该去setInterval

我还稍微简化了您的代码。

function refresh() {
  setInterval(function() {
    var timestamp = new Date().getTime();
    var newImage = 'https://picsum.photos/200?timestamp=' + new Date().getTime();
    $('#artwork').attr('src', newImage);
  }, 2000);
}
refresh();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="auto">
  <img id="artwork" src="https://picsum.photos/200">
</div>