如何在 UI 中保持流数据更新

Question

我正在创建一个 Shoutcast 播放器。使用 Shoutcast 统计数据，我可以知道当前正在播放的曲目。但是，我正在寻找一种解决方案，以便在更改曲目后对其进行更新...

这里有一段代码显示当前歌曲的标题。

var url = "http://212.18.63.135:9034/stats?sid=1&json=1&callback=?";

$.getJSON(url, function(data) {
  $("#title").text(data.songtitle);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title"></div>

上面的代码是静态的，因为一旦统计数据发生变化，它就永远不会改变。我需要让它动态化，这样它就会随着当前歌曲的变化而变化。换句话说，一旦更新了统计数据 JSON，它也必须更新 UI。

知道怎么做吗？

提前致谢。

Answer 1

您可以使用每 10 秒调用一次的 setInterval 方法。您可以根据需要更改时间。

var url = "http://212.18.63.135:9034/stats?sid=1&json=1&callback=?";

setInterval(function(){ 
         $.getJSON(url, function(data) {
           $("#title").text(data.songtitle);
         });
}, 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title"></div>