Question

在调试器中测试的问题是，它将进入第一个函数（直到$.get()而实际上还没有得到任何东西）然后跳到第二个函数（再一次，直到$.get()）。然后，它将继续执行第一个函数，直到它完成检索所有项目，然后当它进入第二个函数时，它将执行相同的操作，但出于一些神秘的原因，videoIdChainStr将所有视频ID保存在一个字符串中第一个函数从未被检索或被执行，因为我怀疑，它已经执行了第二个函数的$。get(...)，并且当它具有值时，从未再次“第二次”执行它。为了解决这个问题，我想到了异步操作，起初有点令人困惑，但在阅读了一些文章后，我理解了一些，但不是100％，特别是在代码中还没有，但我尝试了下面的代码：

我想真正理解如何在这种情况下使用$ .Deferred，resolve（）和promise（），如果适用的话，还有其他方法，比如then（），因为我只需要一个解决方案并承诺返回一个填充值（videoIdChainStr）到需要的done（）并在此后执行第二个函数。

第一个功能：

var relatedVidsDefer = function relatedVids(videoId)
{
    var videoIdChainStr = null;
    var deferredVal = $.Deferred(); // instantiate defer object

    $.get( // get related videos related to videoId
        "https://www.googleapis.com/youtube/v3/search",
        {
            part: 'snippet',
            maxResults: vidResults,
            relatedToVideoId: videoId,
            order: 'relevance',
            type: 'video',
            key: 'XXXXXXX'
        },

        function(data)
        {
            $.each(data.items,
                function(i, item)
                {
                    try
                    {
                        console.log(item);
                        var vidTitle = item.snippet.title; // video title

                        var vidThumbUrl = item.snippet.thumbnails.default.url; 
                        var channelTitle = item.snippet.channelTitle;
                        var extractVideoId = null; // var to extract video id string from vidThumbUrl

                        // check if vidThumbUrl is not null, empty string, or undefined
                        if(vidThumbUrl)
                        {
                            var split = vidThumbUrl.split("/"); // split string when '/' seen
                            extractVideoId = split[4]; // retrieve the fourth index on the fourth '/'
                        }
                        else console.error("vidThumbUrl is either undefined or null or empty string.");

                        // if video title is longer than 25 characters, insert the three-dotted ellipse
                        if(vidTitle.length > 25)
                        {
                            var strNewVidTitle = vidTitle.substr(0, 25) + "...";
                            vidTitle = strNewVidTitle;
                        }





                        // check whether channelTitle is the same
                        if(channelTitle === "Channel Name")
                        {
                            extractedVideoIdArr.push(extractVideoId); // add the extracted video id to the array

                            // check if extractedVideoIdArr is not empty
                            if(extractedVideoIdArr !== 'undefined' && extractedVideoIdArr.length > 0)
                            {
                                videoIdChainStr = extractedVideoIdArr.join(", "); // change from an array to a chain string of videoIds for the relatedVidsDetails() 
                            }
                            deferredVal.resolve(videoIdChainStr); // get the value


                            var vidThumbnail = '<div class="video-thumbnail"><a class="thumb-link" href="single-video.html"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a class="thumb-link" href="single-video.html">' + vidTitle + '</a><br/></div>';

                            // print results
                            $('.thumb-related').append(vidThumbnail);
                            $(item).show(); // show current video thumbnail item 
                        }
                        else $(item).hide(); // hide current video thumbnail item
                    }
                    catch(err)
                    {
                        console.error(err.message); // log error but continue operation    
                    }
                }
            ); 
        }
    );
    return deferredVal.promise(); // return the value and execute the second function
};

第二功能：

var relatedVidsDetailsDefer = function relatedVidsDetails(videoIdChainStr)
{
    // change extractvideoid into a string by tostring() or join() for param to recognize
    console.log("initial: ", extractedVideoIdArr);
    $.get(
        "https://www.googleapis.com/youtube/v3/videos",
        {
            part: 'snippet, contentDetails, statistics',
            id: videoIdChainStr, // chain string of video ids to be called upon in a single request
            key: 'XXXXXXX',
        },

        function(data)
        {
            $.each(data.items,
                function(i, item)
                {
                    try
                    {
                        var _vidDuration = item.contentDetails.duration;
                        var _viewCount = item.statistics.viewCount;
                        console.log("id: " + extractedVideoIdArr[i] + " duration: " + _vidDuration);
                        console.log("id: " + extractedVideoIdArr[i] + " viewCount: " + _viewCount);

                        $('.vidDetails').append(convert_time(_vidDuration) + ' / Views: ' + _viewCount);
                    }
                    catch(err)
                    {
                        console.error(err.message); // log error but continue operation    
                    }
                }
            );
        }
    );
};

执行：

relatedVidsDefer(_videoId).done(relatedVidsDetailsDefer); // wait till first function (before .done parameter) is complete before executing the second (in .done paramater)

更新

代码更新了@ valarauko的回答。最后，它工作，并能够检索视频的详细信息，其中一个视频复制到其余视频。进入第二个函数后，videoIdChainStr只有第一个id而不是其余的...我假设deferredVal.resolve(videoIdChainStr);会在第一个函数第一次获得id时立即解析循环，但不是字符串的其余部分，即使它继续循环并解析所有项目。

例如：假设将ID1, ID2, ID3传递给参数，但只传递ID1。这就是为什么它只通过第二个函数的每个循环一次。我该如何解决这个问题？

Answer 1

之前执行第二个函数的原因是因为您将括号附加到done语句中的函数（这会立即执行函数并在完成的回调中分配函数的结果。

relatedVidsDefer(_videoId).done(relatedVidsDetailsDefer());

应该是

relatedVidsDefer(_videoId).done(relatedVidsDetailsDefer);

另外我不知道你是否故意使用videoIdChainStr一个全局变量，但我建议你在本地使用它并提供相关的VIDDetailsDefer一个接收参数的函数（因为你不应该对第一个函数进行任何更改）已经用该字符串解析了承诺。

第二个功能就像

var relatedVidsDetailsDefer = function relatedVidsDetails(videoIdChainStr) {...}

<强>更新

如果查看jQuery延迟文档（link），已解析/拒绝的promise将忽略将来的调用以解析/拒绝并返回第一个已解决/拒绝的数据。另请注意，您只有一个完成语句，因此您只是检查第一个语句。

对于您的特定问题，您可以修改第二个函数以接收字符串数组并使用字符串数组解析promise。

在这种情况下，如何正确使用$ .Deferred（）/ Promise（）？

1 个答案: