How to execute code after multiple $.get() requests using a deferred object?

Question

I'm having difficulties with executing multiple $.get() requests first before executing the total results. I have a request that gets all 50 videos (max), then does a second request (using the same $.get() request with a different pageToken from the previous request) that retrieves the next 50 videos. Now, the problem lies after this second request is complete. I'm trying to print out results stored from an array of total values from both requests after the second one has completed but I hit a wall.

Problem:

// when first request is resolved, do a second request
$.when(testGetPlaylists(deferredFunc)).done(function()
{
   testGetPlaylists(playlistId, globalPageToken, deferredFunc); // run second request...WORKS FINE

   // doesn't work as it gets the same promise resolved from the first request and executes this function too
   $.when(testGetPlaylists(deferredFunc)).done(function()
   {
      console.log("second request has completed! Logging total values from both requests...");
   });
});

Also tried: (but got an error: TypeError: testGetPlaylists(...) function is not defined)

// when first request is resolved, do a second request
$.when(testGetPlaylists(deferredFunc)).done(function()
{
   testGetPlaylists(playlistId, globalPageToken, deferredFunc).done(function()
   {
      console.log("second request has completed! Logging total values from both requests...");
   });
});

jQuery:

// func to retrieve each video information
function testGetPlaylists(playlistId, pageToken, deferredFunc)
{
    $.get(
        "https://www.googleapis.com/youtube/v3/playlistItems",
        {
            part: 'snippet',
            maxResults: vidResults
            playlistId: playlistId,
            pageToken: pageToken,
            key: 'XXXXXXXXXXXXX'
        },

        // print the results
        function(data)
        {
            $.each(data.items, 
                function(i, item) 
                {
                    console.log(item);
                    var vidTitle = item.snippet.title; // video title
                    var vidDesc = item.snippet.description; // video description
                    var videoId = item.snippet.resourceId.videoId; // video id
                    var vidThumbUrl = item.snippet.thumbnails.medium.url; // video thumbnail url
                    globalPlaylistId = playlistId; 
                    globalPageToken = pageToken;

                    // code that gets all the video info stored into an array ...
                }
            );
            // keep track of page token position
            prevPageToken = data.prevPageToken; 
            nextPageToken = data.nextPageToken;
            globalPageToken = nextPageToken;
        }
    ).done(function() // execute after initial request is complete
    {
        d1.resolve(); // resolve when get request is successful
        deferredFunc = d1; // pass to parameter
        return d1.promise(); // return done
        }).fail(function()
        {
            d1.reject();  //reject if get request fails
            console.log("Could not fetch the videos.");
        });
    });
}

Document Ready:

$(document).ready(function()
{
    $.get( // get channel name and load data
        "https://www.googleapis.com/youtube/v3/channels",
        {
            part: 'contentDetails',
            forUsername: channelName,
            key: 'XXXXXXXXXX'
        },

        function(data)
        {
            $.each(data.items,
                  function(i, item) 
                  {
                     console.log(item); // log all items to console
                     var playlistId = item.contentDetails.relatedPlaylists.uploads;

                     testGetPlaylists(playlistId); // initial loading playlist

                     // when first request is resolved, do a second request
                     $.when(testGetPlaylists(deferredFunc)).done(function()
                     {
                         testGetPlaylists(playlistId, globalPageToken, deferredFunc); // run second request

                         $.when(testGetPlaylists(deferredFunc)).done(function()
                         {
                            console.log("second request has completed! Logging total values from both requests...");
                         });
                     });
                 }
            );
        }         
    );
});

Answer 1

I believe your issue is stemming from relying on a single deferred, d1. Iirc, deferreds only resolve/reject once so your logic for reusing it would be part of the issue.

I would suggest as a first step to change your method testGetPlaylists(playlistId, pageToken) to be something like testGetPlaylists(playlistId, pageToken, aDeferred) so you can pass the deferred in and reference that parameter instead of the global d1. This will let you create multiple deferreds and reuse that method for your purposes.

I'll elaborate some more. Your wanting to make two calls, but you want the second one to wait on the first. And your using your own deferred instead of the one returned from $.ajax() since your doing something in your done with it. So logically the steps would be something like...

var firstRequestDeferred = $.Deferred();
testGetPlaylists(playlistId, globalPageToken, firstRequestDeferred);

$.when(firstRequestDeferred).then(function() {
    console.log('First request finished');
    var secondRequestDeferred = $.Deferred();
    testGetPlaylists(playlistId, globalPageToken, secondRequestDeferred);

    $.when(secondRequestDeferred).then(function() {
        console.log("Second request finished");
        //do other stuff
    });
});

Something like that.