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