0

I am currently playing about with the LastFM API and trying to get a Recently Played Tracks list to update as I play tracks through Spotify and ITunes. I have got the initial code working through a combination of JS and Handlebars so that a static list of tracks is loaded in on page load which is current at the time of page load.

However I want the list to update as I select a new track without refreshing the page. So I thought I could just use a setInterval function to call my original function every 5 seconds or so. However for some reason my setInterval function is only running once on page load.

I know that this is a real simple error but I can't work out why? Help!!

var clientname = {};

clientname.website = (function(){
    var
    initPlugins = function(){
        var setupLastFM = (function(){

            /* Create a cache object */
            var cache = new LastFMCache(),

            /* Create a LastFM object */
            lastfm = new LastFM({
                apiKey    : '6db1989bd348bf91797bad802c6645d8',
                apiSecret : '155270f02728b1936ed7699e9f7b8de9',
                cache     : cache
            }),

            attachTemplate = function(data, handlebarsTemplateID){
                var template = Handlebars.compile(handlebarsTemplateID.html());
                $(".container").append(template(data));
            }

            /* Load some artist info. */
        lastfm.user.getRecentTracks({user: 'jimmersjukebox'}, {
            success: function(data){
                var trackData = data.recenttracks.track,
                    tracks = $.map(trackData, function(track) {
                        if(track['@attr']){
                            var isCurrentTrack = true;
                        }
                        return {
                            currenttrack: isCurrentTrack,
                            song: track.name,
                            artist: track.artist['#text']
                        };
                    });

                attachTemplate(tracks, $("#trackInfo"));
            }, error: function(code, message){
        }}),

        intervalID = window.setInterval(console.log("test"), 1000);

    }());
}

return{
    init: function(){
        initPlugins();
    }
};
})();
$(window).load(clientname.website.init);
James Howell
  • 1,392
  • 5
  • 24
  • 42

4 Answers4

1

You are running console.log("test") immediately. Try encapsulating this in anther function, but do not instantiate it by including the parenthesis ().

intervalID = window.setInterval(function(){
    console.log("test");
}, 1000);
KJ Price
  • 5,774
  • 3
  • 21
  • 34
0

You should not call the function in setInterval. It needs a callback.

Say like bellow

intervalID = window.setInterval(function(){
   console.log("test");
}, 1000);
Mritunjay
  • 25,338
  • 7
  • 55
  • 68
0

You used a function call instead of a function reference as the first parameter of the setInterval. Do it like this:

function test() {
  console.log("test");
}

   intervalID= window.setInterval(test, 1000);

or you can do this also:

   intervalID= window.setInterval( function() {
      console.log("test!");
    }, 1000);
Suchit kumar
  • 11,809
  • 3
  • 22
  • 44
0

I would recommend to use setTimeout: Use a function to contain the setTimeout, and call it within the function: 

$(function() {
var current = $('#counter').text();
var endvalue = 50;

function timeoutVersion() {
    if (current === endvalue) {return false;} else {
        current++;
        $('#counter').text(current);
    }
    setTimeout(timeoutVersion, 50);
}

$('a').click(function() {
    timeoutVersion();
})

})​

JS Fiddle

Hassene Benammou
  • 369
  • 2
  • 4
  • 11