Javascript 从两个函数jquery追加代码

从这里开始是我的代码副本

var userid ='UCLdin3PebPaIVQdIC7Lp-kg'; 
var devkey ='*****************'; 



$(document).ready(function(){ 
    $.get( 
        "https://www.googleapis.com/youtube/v3/channels",{ 
            part: 'contentDetails', 
            id: userid, 
            key: devkey}, 
            function(data){ 
                $.each(data.items, function(i, item){ 
                    pid = item.contentDetails.relatedPlaylists.uploads; 
                    getVids(pid); 
                 }) 
            } 
    ); 

    function getVids(pid){ 
        $.get( 
            "https://www.googleapis.com/youtube/v3/playlistItems",{ 
                part: 'snippet', 
                playlistId: pid, 
                key: devkey}, 
            function(data){ 
                $.each(data.items, function(i, item){ 
                    console.log(item);
                    videoTitle = item.snippet.title; 
                    videoid = item.snippet.resourceId.videoId; 
                    getdur(videoid); 
                    videoimg = item.snippet.thumbnails.maxres.url; 
                    videodesc = item.snippet.description; 

                    var name ='<h4 class="modal-title">'+videoTitle+'</h4>'; 
                    var thumb ='<div class="ctr col-md-3 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div>';
                    var desc ='<div>'+videodesc+'</div>'; 
                    var video ='<iframe src\"//www.youtube.com/embed/'+videoid+'\"></>';



                }) 
            } 
        ); 
    } 
    function getdur(videoid){ 
        $.get( 
            "https://www.googleapis.com/youtube/v3/videos", { 
                part:'contentDetails', 
                id: videoid, 
                key: devkey}, 
            function(data){ 
                $.each(data.items, function(i, item){ 
                   console.log(item);
                    videodur = item.contentDetails.duration; 
                    videolength = videodur.replace("PT","").replace("H",":").replace("M",":").replace("S","");

                    var Duration ='<div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div>';


                     thumblen ='<div class="col-md-3 col-xs-12 pad-5"><div class="ctr col-md-12 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div><div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div></div>'
                    $('#thumb-len').append(thumblen); 
                }) 
            } 
        ); 
    } 
});

var userid='UCLdin3PebPaIVQdIC7Lp-kg'；
var devkey='******************'；
$（文档）.ready（函数（）{
$获取（
"https://www.googleapis.com/youtube/v3/channels",{ 
第部分：“内容详细信息”，
id:userid，
key:devkey}，
函数（数据）{
$.each（data.items，function（i，item）{
pid=item.contentDetails.relatedPlaylists.uploads；
getVids（pid）；
}) 
} 
); 
函数getVids（pid）{
$获取（
"https://www.googleapis.com/youtube/v3/playlistItems",{ 
部分：'代码片段'，
playlid:pid，
key:devkey}，
函数（数据）{
$.each（data.items，function（i，item）{
控制台日志（项目）；
videoTitle=item.snippet.title；
videoid=item.snippet.resourceId.videoid；
getdur（videoid）；
videoimg=item.snippet.thumbnails.maxres.url；
videodesc=item.snippet.description；
变量名称=“”+videoTitle+“”；
变量thumb=''；
var desc=''+videodesc+''；
var视频=“”；
}) 
} 
); 
} 
函数getdur（videoid）{
$获取（
"https://www.googleapis.com/youtube/v3/videos", { 
第部分：'contentDetails'，
id:videoid，
key:devkey}，
函数（数据）{
$.each（data.items，function（i，item）{
控制台日志（项目）；
videodur=item.contentDetails.duration；
videolength=videodur.replace（“PT”和“）。replace（“H”和“：”）。replace（“M”和“：”）。replace（“S”）和“）；
变量持续时间=''+视频长度+''；
拇指长度=“”+视频长度+“”
$（'#thumblen'）。附加（thumblen）；
}) 
} 
); 
} 
});

我要做的是从VarThumb和VarDuration中获取图像，并在同一个div中输出它们

下面是我如何计划它的工作：

这是我目前得到的

它输出的时间是正确的，但所有的视频我只得到一个拇指 虽然当我自己附加getvids函数时，它会按计划输出视频（每个视频一个） 我还要补充一点，它只是在缩略图上有这个问题

我还可以添加这个选项吗？这将使用引导实现（我将修改代码以从css获得正确的类） 对于信息（如代码中所述），图像将位于链接中（持续时间也将是额外的），此链接将链接到点击链接时显示的模式

我有没有办法做到这一点

因为目前它并没有真正起作用

我还可以补充一点，我已经留下了控制台日志，如果您需要查看它的话

在阅读了我的代码之后，似乎只有缩略图只给出了一次 建议我使用promise，但我看不出这将如何解决我的问题，因为我一次运行了所有代码，但（如果我理解正确的话）promise是在运行代码的另一部分之后运行的

---

在做了很多关于这个的记录之后，我可能会想到如何使用这个 我想先附加时间，然后使用promise将图像附加到刚才附加的div中

---

我还发现appendTo对我有好处吗？

这将是使用承诺或延迟对象的一个很好的用例。非常感谢您的快速回答我已经得到了演示，但我不知道如何在我的代码中使用它。您可以将演示粘贴到这里吗？在对这一点做了大量的记录之后，我可能刚刚想到如何使用它。我想先附加时间，然后使用承诺，然后再将图像附加到刚才附加的div