자바 스크립트 - 내 함수를 실행하기 위해 잠자기 기능을 사용해야합니다.

Question

YouTube 데이터 API를 사용합니다. 내 코드를 실행합니다.

keyWordsearch() 

작동하지 않습니다. 크롬 콘솔 말 :

"catch되지 않은 형식 오류를 정의되지 않은 재산 '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

: 당신은 단지 API 클라이언트 래퍼 스크립트를로드

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

; 추가 스크립트의 백그라운드로드를 수행 할 수 있으며로드가 완료되면 제공된 함수 googleApiClientReady을 호출합니다.

setTimeout이 없으면 API 클라이언트가 실제로로드되기 전에 keywordSearch 함수가 너무 빨리 실행됩니다. setTimeout을 사용하면 클라이언트가 1000 밀리 초 내에로드되었다는 것은 운이 좋았지 만 느린 연결에서는 그렇지 않습니다.

따라서 시작 코드를 googleApiClientReady이라는 함수에 넣거나 그 이름을 변경해야합니다. 작동 예제는 https://developers.google.com/api-client-library/javascript/samples/samples을 참조하십시오.