Javascript - 我必须使用 sleep 函数来运行我的函数

Question

我使用 youtube 数据 api。我在其中运行我的代码。

keyWordsearch()

它不工作。 Chrome 控制台显示“未捕获类型错误:无法读取未定义的属性‘setApiKey’”

但它的工作方式很奇怪

setTimeout(keyWordsearch, 1000);

我的所有代码

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="<?php echo SITE_PUBLIC; ?>/bootstrap-3.2.0/dist/js/bootstrap.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
    <script>
        $(document).ready(function() 
        {   

            var domain = '<?php echo SITE_URL; ?>';

                    function makeRequest(q, resultsIndex) {
                        var request = gapi.client.youtube.search.list({
                                q: q,
                                part: 'snippet',
                                type: 'video', 
                                maxResults: 1,
                                videoCategoryId:10
                        });
                        request.execute(function(response)  {                                                                                    
                                $('#results').empty()
                                var srchItems = response.result.items;                      
                                $.each(srchItems, function(index, item) {
                                vidTitle = item.snippet.title;  
                                vidThumburl =  item.snippet.thumbnails.default.url;                 
                                vidThumbimg = '';

                                    html = '<div  class="embed-responsive embed-responsive-16by9"> \
                                         <iframe height="315" \
                                        src="//www.youtube.com/embed/'+ item.id.videoId +'" \
                                        frameborder="0" allowfullscreen></iframe> \
                                        </div><br>'

                                $('.musics-results:eq('+resultsIndex+')').append(html);                         

                        })  
                    })  
                }   
                    function keyWordsearch(){
                        gapi.client.setApiKey('blabla');
                        gapi.client.load('youtube', 'v3', function() {

                                $('.musics-results').each(function( index, value){
                                    data = jQuery.parseJSON( $(this).attr('value') );
                                    $.each(data['names'], function( index2, value2 ) {
                                        makeRequest(value2, index);
                                    });

                                });


                        });
                        }

                    //setTimeout(keyWordsearch, 1000);
                    keyWordsearch();
    })
    </script>

我应该怎么办？提前致谢

Answer 1

这里:

<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>

您只是加载 API 客户端包装器脚本；它可能会在后台加载其他脚本，并在加载完成后调用您提供的函数 googleApiClientReady。

如果没有 setTimeout，您的 keywordSearch 函数在 API 客户端实际加载之前就运行得太快。使用 setTimeout，您很幸运客户端在这 1000 毫秒内加载，但在慢速连接上情况不会如此。

因此，您应该将启动代码放入名为 googleApiClientReady 的函数中(或更改该名称)。请参阅https://developers.google.com/api-client-library/javascript/samples/samples用于工作示例。