Question

I am making an application for Spotify. With this application I have a simple ‘Subscribe’ function which allows me to add a playlist of the album from the current track the user is listening to. Everything works fine. I have this bug though.
After listening to more then 1 song, when I press the subscribe button it will append a playlist for every song listened to.

For example: I listened to 3 songs of the album, then I press subscribed: It will append 3 playlists, for every song one.
Then: If I then listen to a song from a different album, when Subscribe is pressed it will append a playlist for the new song AND for the previous 3 songs. This keeps occuring until I reloaded the application.

It seems it remembers every song listened to after loading the application.

This is my code:

function subscribe(){

//Cache important information
var playerTrackInfo = player.track;
var track = playerTrackInfo.data;
var albumUri = track.album.uri;
var albumTitle = track.album.name;
var artistFromAlbum = track.album.artist.name;

//Click event on button
$(".subscribe button").on("click", function(playlist){
    console.log("I work!"); //Checks if button click works

    //Creates new playlist "Albumtitle - Artistname"
    var playlist = new models.Playlist(albumTitle+" - "+artistFromAlbum);

    //Fills in playlist with album from current playing track
    models.Album.fromURI(albumUri, function(album){
        $(album.tracks).each(function(i) {
            playlist.add(album.tracks[i]);
        });
    });

    playlist.subscribed = true;

    playlist.observe(models.EVENT.CHANGE, function() {
        console.log("Playlist was subscribed!");
    });
});

}

I need a way to prevent this problem. I’ve tried a lot of different methods and searched the web endlessly, but so far no luck. Any help or pointing into the right direction will be awesome!

Answer 1

I have solved the problem.

There were 2 things that caused the bug. This were the solutions:

1. I had all the vars placed inside click event.

2. I had a eventListener somewhere else in the code which made it also bug. That eventlistener detected if they player state has changed, if true it will refresh the init. However, it apparently stacked the vars inside my subscribe(). After taking it out this out the eventListener and replacing the vars, it finally works how it supposed to work.

   function subscribe(){
   
    //Click event on button within div with class 'subscribe'
    $(".subscribe button").on("click", function(playlist){
   console.log("I work!"); //Checks if button click works
   
   //Cache important information
   var playerTrackInfo = player.track;
   var track = playerTrackInfo.data;
   var albumUri = track.album.uri;
   
   //Creates new playlist "Albumtitle - Artistname"
   var albumTitle = track.album.name;
   var artistFromAlbum = track.album.artist.name;
   var playlist = new models.Playlist(albumTitle +" - "+ artistFromAlbum);
   
   //Fills in playlist with album from current playing track
   models.Album.fromURI(albumUri, function(album){
       $(album.tracks).each(function(i) {
           playlist.add(album.tracks[i]);
       });
   });
   
   playlist.subscribed = true;
   
   playlist.observe(models.EVENT.CHANGE, function() {
       console.log("Playlist was subscribed!");
   });
   

   });
   }

Thanks for helping people!