每秒从 API 更新数据答案

【问题标题】：Update data from API every second每秒从 API 更新数据
【发布时间】：2018-10-17 10:16:42
【问题描述】：

我目前正在为一个使用 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();
    }
});

如果我需要发布任何其他代码以提供帮助，请告诉我！

【问题讨论】：

您可以使用setInterval 每 x 毫秒运行一次代码。
将上面的代码包装在一个函数中，然后设置interval 以使函数以您设置的频率重复执行。提示：每秒一次可能太频繁了——在你触发下一个请求之前，你很有可能甚至没有收到对前一个请求的响应。很有可能数据会乱序到达，或者页面的性能会开始下降，或者服务器会阻止您向其发送垃圾邮件。
Spotify Webhooks?的可能重复

标签： javascript html ajax api

【解决方案1】：

您可以通过使用 setTimeout 或 setInterval 来实现。

不同之处在于 setInterval 以指定的时间间隔一次又一次执行给定的函数（直到 clearInterval() 函数被调用）； setTimeout 在指定的时间间隔之后执行给定的函数一次。

在您完成必要的响应过程后。您可以在函数末尾递归调用 makerequest() 函数。该行包含注释提供了在 10s 后再次调用的 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
        }
    });

}

【讨论】：

"你可以在函数末尾递归调用makerequest()函数。"...你应该实际展示一个例子，那么我们就有了一个完整的解决方案。
感谢您的更新。但是，您的代码在发出下一个请求之前不会等待上一个调用完成。它在启动 ajax 请求后立即开始超时。如果您希望它等到 ajax 完成后再重新启动计时器，您必须将对“setTimeout”的调用放在“成功”回调中。否则，使用超时几乎没有意义，您可以使用 setInterval 代替。
感谢阿迪森的指正。此外，我更正并详细说明了我对差异的解释。

【解决方案2】：

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

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

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

【讨论】：