如何在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

您可以使用setInterval方法，该方法将每隔10秒调用一次。您可以根据您的要求更改时间。

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>