javascript - jQuery - 抓取 youtube 标题，等待下载标题

Question

我正在尝试获取 YouTube 视频的标题并将其打印在页面上，在此视频的缩略图下方。

一切正常，我获得了 API key ，标题正在打印到控制台。但它是用 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 key 不是个好主意，但我会更改它，在 google 中添加网站限制。

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);
    }
  });
}

你可以找到一个 fiddle here