javascript - 如何让两个徽章(显示流媒体 channel 的实时状态)每分钟自动刷新？

Question

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

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

这是 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 的帮助下)