I'm currently working for a school project where I'm working with the Spotify API. Now I've got so far that I receive the current song someone is listening to right now.

But the problem is, that information is only received once the site has been refreshed or opened, but I want it to keep refreshing every second (without refreshing the whole page) so it's up to date with the listener. Does anyone here have any idea on how I can acplish that?

This is the AJAX request I'm using (I'm not sure if it's useful or anything)

$.ajax({
    url: '',
    headers: {
      'Authorization': 'Bearer ' + access_token
    },
    success: function(response) {
      userInfoPlaceholder.innerHTML = userInfoTemplate(response);
        console.log(response);
      $('#login').hide();
      $('#loggedin').show();
    }
});  

If there is any other code that I need to post in order to help, please let me know!

I'm currently working for a school project where I'm working with the Spotify API. Now I've got so far that I receive the current song someone is listening to right now.

But the problem is, that information is only received once the site has been refreshed or opened, but I want it to keep refreshing every second (without refreshing the whole page) so it's up to date with the listener. Does anyone here have any idea on how I can acplish that?

This is the AJAX request I'm using (I'm not sure if it's useful or anything)

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

If there is any other code that I need to post in order to help, please let me know!

• javascript
• html
• ajax
• api

Share Improve this question Follow edited Oct 17, 2018 at 10:32 Chris 4,7481313 gold badges5555 silver badges9797 bronze badges asked Oct 17, 2018 at 10:16 Marco N.Marco N. 8333 silver badges88 bronze badges 3

• You can use setInterval to run code every x milliseconds. – Jerodev Commented Oct 17, 2018 at 10:20
• 2 wrap your code above in a function, and then set an interval to cause the function to be executed repeatedly at the frequency you set. Hint: once per second is probably too often - there's a good chance you won't even have received a response to the previous request before you're firing the next one. There's a good chance the data will arrive out of sequence, or the page's performance will start to degrade, or the server will block you for spamming it with requests. – ADyson Commented Oct 17, 2018 at 10:20
• Possible duplicate of Spotify Webhooks? – Anirudh Mangalvedhekar Commented Oct 17, 2018 at 10:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can achieve this by using setTimeout or setInterval.

The difference is that setInterval executes given function again and again at the specified time intervals (until clearInterval() function is called); setTimeout executes given function one time just after the specified time interval.

After you plete the necessary process with the response. You can call makerequest() function recursively at the end of the function. The line includes ment provides makerequest() function to be called after 10s again.

function makerequest() {
    $.ajax({
        url: 'https://api.spotify./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
        }
    });

}

You can set setInterval. which will call a function in every defined seconds.

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

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