jQuery - 抓取youtube標題，等待標題被下載

Question

我試圖抓住YouTube視頻的標題，並在該視頻的縮略圖下的頁面上打印它。

一切工作正常，我得到的API密鑰，並標題打印到控制檯。但是它是用Ajax完成的，所以我必須讓所有的東西都等待標題來臨。這就是我卡住的地方。

那麼，如何讓代碼/循環等待Ajax來完成它呢？

我的簡化代碼。我試圖在代碼筆上發佈它，但沒有使js工作的運氣。 https://codepen.io/anon/pen/JyYzwM

鏈接到它的活動頁面。它在那裏工作，你可以看到控制檯返回標題。 http://boiling-everglades-49375.herokuapp.com/video.php

$('.category-shape').on('click', function() { 
    var documentary = ["siAPGGuvPxA", 'i6Hgldw1yS0', 'Omg1gMNtVpY', 'MfWHPnxrDI4', 'aT0HduxW8KY']; 
    showVideos(documentary); 
} 


function showVideos(channel) { 
if (!isFirstPass) { 
    $('#addedContent').remove(); 
} 
$('#dropdownVideoPicker').append('<div id="addedContent"></div>'); 
console.log(" "); 
for (var i = 0; i < channel.length; i++) { 
    var title = getTitle(channel[i]); 
    $.when(getTitle(channel[i])).done(function() { 
     var pageCode = generatePageCode(channel[i], title); 
     console.log(getTitle(channel[i])); 
     $('#addedContent').append(pageCode); 
    }); 
} 
$('#addedContent').hide(); 
$('#addedContent').slideDown(); 
isFirstPass = false; 
$("html, body").animate({scrollTop: ($('.category-shape:nth-of-type(6)').offset().top)}, 1000); 
grabYtId(); 
} 


function grabYtId() { 
    $('.videoThumbnail').on('click', function() { 
     var $ytId = $(this).attr('src').slice(27, -6); 
     showModalWindow($ytId); 
    }); 
} 


function showModalWindow(Id) { 
var $theModal = $("#videoModal"), 
    iframe = $("#iframe")[0], 
    videoSRC = 'https://www.youtube.com/embed/' + Id, 
    videoSRCauto = videoSRC + "?autoplay=1&rel=0&controls=1&showinfo=0"; 
$(iframe).attr('src', videoSRCauto); 
$('button.close').click(function() { 
    $(iframe).attr('src', videoSRC); 
}); 
$theModal.on("hidden.bs.modal", function() { 
    $(iframe).attr('src', videoSRC); 
}); 
} 

而這，抓住標題

function getTitle(videoId) { 
$.ajax({ 
    url: "https://www.googleapis.com/youtube/v3/videos?id=" + videoId + "&key=" + "AIzaSyCDyE576FU2QRbkHivxHfrjbEjPwartzKo" + "&fields=items(snippet(title))&part=snippet", 
    dataType: "jsonp", 
    success: function (data) { 
     var title = data.items[0].snippet.title; 
     console.debug("function: " + title); 
     var titleLoaded = new CustomEvent('titleLoaded', { 
      detail: { 
       loaded: true 
      } 
     }); 
     $('body')[0].dispatchEvent(titleLoaded); 
     return title; 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
     alert(textStatus, +' | ' + errorThrown); 
    } 
}); 
} 

和作用是的，我知道，給一個API密鑰對公衆是一個壞主意，但我會改變它添加網站限制在谷歌。

Answer 1

您可以推動AJAX遞延對象數組，並調用$.when.apply($,arr)等待所有的呼叫進行處理：

function showVideos(channel) { 

    if (!isFirstPass) { 
    $('#addedContent').remove(); 
    } 
    $('#dropdownVideoPicker').append('<div id="addedContent"></div>'); 

    var arr = $.map(channel, function(data) { 
    getTitle(data); 
    }); 

    $.when.apply($, arr).then(function() { 
    $('#addedContent').hide(); 
    $('#addedContent').slideDown(); 
    isFirstPass = false; 
    $("html, body").animate({ 
     scrollTop: ($('.category-shape:nth-of-type(6)').offset().top) 
    }, 1000); 
    grabYtId(); 
    }); 
} 

function getTitle(videoId) { 

    return $.ajax({ 
    url: "https://www.googleapis.com/youtube/v3/videos?id=" + videoId + "&key=" + "AIzaSyCDyE576FU2QRbkHivxHfrjbEjPwartzKo" + "&fields=items(snippet(title))&part=snippet", 
    dataType: "json", 
    success: function(data, status, jqxr) { 
     var title = data.items[0].snippet.title; 
     var titleLoaded = new CustomEvent('titleLoaded', { 
     detail: { 
      loaded: true 
     } 
     }); 
     $('body')[0].dispatchEvent(titleLoaded); 
     var pageCode = generatePageCode(videoId, title); 
     console.log(title); 
     $('#addedContent').append(pageCode); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     alert(textStatus, +' | ' + errorThrown); 
    } 
    }); 
} 

你可以找到一個小提琴here