javascript - 自动刷新使用 JSON 加载的内容

Question

我有一个小脚本，可以使用 jQuery 加载我从 last.fm 听的最后一首歌曲，如下所示:

$.getJSON('http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=paul_r_schaefer&api_key=0f680404e39c821cac34008cc4d803db&format=json', function(data) {
var song = $(".song"), artistVal = data.recenttracks.track[0].artist["#text"], trackVal = data.recenttracks.track[0].name;
song.append(artistVal + " \u2014 " + trackVal); });

有什么办法可以让它删除已经附加到 <span class="song"></span> 的内容吗？并再次加载？对于我的一生，我无法找到一种不重复这首歌的方法。

编辑:这是可行的，但是，它在第​​一次加载时有延迟。有没有办法让它运行一次，然后每 3 秒刷新一次？

function listens() {
    $.getJSON('http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=paul_r_schaefer&api_key=0f680404e39c821cac34008cc4d803db&format=json', function(data) {
        var song = $(".song"), artistVal = data.recenttracks.track[0].artist["#text"], trackVal = data.recenttracks.track[0].name;
        song.html(artistVal + " \u2014 " + trackVal);
    });
}
setInterval(listens, 3000);

编辑2:这消除了延迟，有没有办法可以减轻这个问题？

listens();
function listens() {
    $.getJSON('http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=paul_r_schaefer&api_key=0f680404e39c821cac34008cc4d803db&format=json', function(data) {
        var song = $(".song"), artistVal = data.recenttracks.track[0].artist["#text"], trackVal = data.recenttracks.track[0].name;
        song.html(artistVal + " \u2014 " + trackVal);
    });
}
setInterval(listens, 3000);

Answer 1

你的问题是 jQuery 的 .append() 很好，appends。它将附加或添加到元素中现有的 HTML 上。您想要完全替换元素的 HTML，因此您的方法应该如下所示:

$.getJSON('http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=paul_r_schaefer&api_key=0f680404e39c821cac34008cc4d803db&format=json', function(data) {
var song = $(".song"), artistVal = data.recenttracks.track[0].artist["#text"], trackVal = data.recenttracks.track[0].name;
song.html(artistVal + " \u2014 " + trackVal); });

查看$.html(htmlString) :

From the jQuery API:

Set the HTML contents of each element in the set of matched elements.