每秒从API更新数据

Question

我目前正在参与一个学校项目，该项目涉及使用Spotify API。现在我已经成功获取到了某个人正在听的当前歌曲。

但问题是，这些信息只有在刷新或打开网站时才会更新，而我想让它每秒自动更新（无需刷新整个页面），以便与听众保持同步。这里是否有人有任何想法可以帮助我完成这个任务？

以下是我正在使用的AJAX请求（我不确定它是否有用或其他作用）。

$.ajax({
    url: 'https://api.spotify.com/v1/me/player/currently-playing',
    headers: {
      'Authorization': 'Bearer ' + access_token
    },
    success: function(response) {
      userInfoPlaceholder.innerHTML = userInfoTemplate(response);
        console.log(response);
      $('#login').hide();
      $('#loggedin').show();
    }
});  

如果需要我提供其他代码以便帮助，请告诉我！

- Marco N.

---

你可以使用 setInterval 每隔 x 毫秒运行一次代码。 - Jerodev

将您的代码放在一个函数中，然后设置一个间隔，以使该函数按您设置的频率重复执行。提示：每秒一次可能太频繁了——在您发出下一个请求之前，您甚至可能还没有收到上一个请求的响应。数据很可能会乱序到达，或者页面性能开始降低，或者服务器会因为您发送大量请求而阻止您。 - ADyson

可能是Spotify Webhooks?的重复问题。 - Anirudh Mangalvedhekar

Answer 1

你可以通过使用setTimeout或setInterval来实现这一点。

它们的区别在于，setInterval会在指定的时间间隔内重复执行给定的函数（直到调用clearInterval()函数为止）；而setTimeout则在指定的时间间隔后仅一次执行给定的函数。

在完成响应的必要过程之后，你可以在函数结尾递归地调用makerequest()函数。该行注释提供了在10秒后再次调用makerequest()函数的方式。

function makerequest() {
    $.ajax({
        url: 'https://api.spotify.com/v1/me/player/currently-playing',
        headers: {
            'Authorization': 'Bearer ' + access_token
        },
        success: function(response) {
            userInfoPlaceholder.innerHTML = userInfoTemplate(response);
            console.log(response);
            $('#login').hide();
            $('#loggedin').show();
            //process with the response and other stuffs
            setTimeout(makerequest, 10000); //recursive call
        }
    });

}

- mdoflaz

---

你可以在函数末尾递归调用makerequest()函数。如果你能提供一个例子，那么我们就有了一个完整的解决方案。 - ADyson

谢谢你的更新。然而，你的代码在发出下一个请求之前并没有等待上一个调用完成。它在启动ajax请求后立即开始超时计时器。如果你想要它在ajax完成之后再次启动计时器，你必须将"setTimeout"调用放在"success"回调函数内部。否则，使用timeout几乎是毫无意义的，你可以使用setInterval代替。 - ADyson

感谢ADyson的纠正。我还对区别进行了修正和详细说明。 - mdoflaz

Answer 2

你可以设置setInterval函数，它将在每个定义的秒数中调用一个函数。

setInterval(function(){
   callAjax();
}, 1000);

var callAjax = function(){
  // Write you ajax here
}

- Sudhir Ojha