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