Come selezionare un listener di eventi che mi consentirà di attendere fino al termine di async.times per eseguire una funzione

Question

Utilizzo un server node.js, l'API Spotify e il modulo nodo spotify-web-api-js per creare un'applicazione Web in cui l'utente può inserire il nome di un artista, vedere un elenco di brani di artisti correlati e quindi salvare la playlist sul proprio account Spotify. Tuttavia, sto ancora avendo problemi con l'ultimo passaggio.

Il mio flusso di autorizzazione dell'utente che sta accadendo prima:

if (params.access_token) { 

    s.setAccessToken(params.access_token); 

    s.getMe().then(function(data) { 

     console.log(data); 
     console.log(data.id); 
     user_id = data.id; 

Sotto di esso è dove le i dati reali delle canzoni sono raccolte dalle API. Sebbene sia inferiore, si verifica prima e l'autorizzazione dell'utente si verifica solo se l'utente fa clic su un secondo pulsante in quella pagina.

async.times(counter, function(n, next){ 
     s.getArtistTopTracks(relatedArtists[n].id, "US", function (err, data2) { 
      relatedArtists[n].song = data2.tracks[0].name; 
      relatedArtists[n].uri = data2.tracks[0].uri; 
      console.log(relatedArtists[n].uri); 
      // make sure to put the access token here add song to playlist 
      // create array 
      song_uris.push(relatedArtists[n].uri); 
      console.log(song_uris); 

      // song_uris = relatedArtists[n].uri; 
      // 
      // console.log(song_uris); 

      next(null); 

     $("#playlist").load(function() { 
      s.addTracksToPlaylist(user_id, playlist_id, song_uris); 
      }); 
     }); 


     }, function(err) { 
     // console.table(relatedArtists); 

     for (k = 0; k < 20; k++) 
     { 
      $('#related-artist').append('<p><strong>' + relatedArtists[k].name + '</strong> -- \"' + relatedArtists[k].song + '\"</p>'); 


     } 

(JSBin of full code here, anche se potrebbe non funzionare perché io uso browserify sul mio server)

In questo momento, sulla linea 114 che ho song_uris.push(relatedArtists[n].uri); spingendo il contenuto in un array, utilizzando async.times. Poiché questo è sotto dove Creo la riproduzione sulla linea 66, mostra come un array vuoto:

s.createPlaylist(user_id, {name: 'Related Artist Playlist'}).then(function(data3) { 
     console.log(data3); 
     playlist_id = data3.uri; 
     playlist_id = playlist_id.substring(33); 
     console.log(playlist_id); 


     console.log(song_uris); 


     }); 

Ci, console.log(song_uris) mostra un array vuoto, così addTracksToPlaylist() pause modo:

D'altra parte, se provo a addTracksToPlaylist() di seguito, non ho l'autorizzazione per accedere all'account dell'utente.

Il flusso di autorizzazione utente è stato aggiunto in seguito dopo che la funzionalità di base della visualizzazione di un elenco di brani era già funzionante, ma non sono sicuro di come rifattorlo efficacemente per salvare quell'elenco nella playlist del mio utente. Al momento, sto solo creando una playlist vuota nell'account Spotify.

Che tipo di listener di eventi posso aggiungere in modo che esso attenda fino a quando viene eseguita ogni singola istanza di async.times, in modo che addTracksToPlaylist() funzioni? Il DOM è già stato caricato inizialmente prima di ottenere questi dati. Ho guardato a this question, ma non mi ha aiutato a risolvere questo problema. Grazie!

MODIFICA: Ora l'array song_uri ha creato il modo in cui ho bisogno, ma non riesco ancora a inserirlo nella playlist. Ho giocato con la posizione del mio token di accesso in modo da poter accedere alla playlist creata, ma ancora senza fortuna.

La console.log(song_uris); dichiarazione sulla linea 130 indica la matrice completata di cui ho bisogno, ma quando inserisco in s.addTracksToPlaylist(user_id, playlist_id, song_uris); ottengo questi errori nella console sviluppatore:

POST https://api.spotify.com/v1/users/tenderoni-/playlists/7MtQTzUsxD4IEJ8NmmE36q/tracks?uris= 400 (Bad Request) 
bundle.js:10616 
Uncaught (in promise) XMLHttpRequest {} 

In sostanza, non è che ricevono il parametro per un po ' ragionare. E io accedo al playlist_id in anticipo, in modo da posso dire che sta funzionando (anche, vedo le playlist in bianco con il titolo specificato in fase di creazione nel mio conto Spotify).

codice completo aggiornato qui: https://github.com/yamilethmedina/cs50xmiami/blob/master/assignments/portfolio/public/scripts.js

Answer 1

L'argomento callback asincrona.i tempi possono richiedere un secondo argomento 'risultati', quindi se chiami 'next' con il song_uri ti aggiri in ogni turno del loop, puoi ottenere song_uris alla fine, passare una callback tramite searchArtist e usarlo lì. Skeleton version:

$(document).ready(function($) { 
    $('#s').on('submit', function() { 
     searchArtists($('#originalartist').val(), function(err, song_uris) { 
      if (params.access_token) { 
       // omitted 
       s.setAccessToken(params.access_token); 
       s.getMe().then(function(data) { 
        console.log(data); 
        console.log(song_uris); 
       }); 
      } 
     }); 
     return false; 
    }); 
}) 

function searchArtists(originalArtist, callback) { 
    s.getArtistRelatedArtists(originalArtistId, function(err, data) { 
     async.times(counter, function(n, next) { 
      // omitted 
      next(related_artists[n].uri) 
     }, function(err, song_uris) { 
      callback(err, song_uris); 
     }); 

    }); 

}