如何让两个徽章（提供流媒体频道的实时状态）每分钟自动刷新？

Question

好的，我有这两个徽章：http://codepen.io/EagleJow/pen/bVrMZv

一个用于 Twitch 频道，一个用于直播频道。我想知道是否有一种简单的方法可以每分钟更新页面上的徽章以显示频道的当前实时状态，而无需重新加载页面的其余部分。

这是 Twitch 的 javascript：

/*TWITCH BADGE*/
(function() {

  var user_name, twitch_widget;

  user_name = "nerdist";
  twitch_widget = $("#twitch-widget");

  twitch_widget.attr("href","http://twitch.tv/" + user_name + "/embed");

  $.getJSON('https://api.twitch.tv/kraken/streams/' + user_name + '?client_id=' + '&callback=?', function(data) {   
      if (data.stream) {
          twitch_widget.html("<span class='online'></span><strong> nerdist</strong></br><span class='live'>Online! Playing: " + data.stream.game + "</span>");
      } else {
          twitch_widget.html("<span class='offline'></span><strong> nerdist</strong></br><span class='notlive'>Offline</span>");
      }  
  });

})();

有什么想法吗？

Answer 1

您可以使用setInterval()

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

示例：

var updateBadge = function() {

  var user_name, twitch_widget;

  user_name = "nerdist";
  twitch_widget = $("#twitch-widget");

  twitch_widget.attr("href","http://twitch.tv/" + user_name + "/embed");

  $.getJSON('https://api.twitch.tv/kraken/streams/' + user_name + '?client_id=' + '&callback=?', function(data) {   
      if (data.stream) {
          twitch_widget.html("<span class='online'></span><strong> nerdist</strong></br><span class='live'>Online! Playing: " + data.stream.game + "</span>");
      } else {
          twitch_widget.html("<span class='offline'></span><strong> nerdist</strong></br><span class='notlive'>Offline</span>");
      }  
  });

}

setInterval(updateBadge, 60000);

updateBadge(); // Call function right now

（在 Repeating setTimeout 的帮助下）

如何让两个徽章（提供流媒体频道的实时状态）每分钟自动刷新？

How Can I Make Two Badges (that Give a Live Status of Streaming Channels) Automatically Refresh Every Minute?

javascript

stream

refresh

badge