等待YouTubePlayerAPI和JQuery文檔準備就緒

Question

我的代碼似乎有競爭狀態。我通過異步加載YouTube播放器API：

<script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    </script> 

而且使用CoffeeScript的我：

$ -> 
    window.onYouTubePlayerAPIReady =() -> 
    #use the youtube player api 

前JQuery的文件準備好方法，並在這種情況下沒有YouTube播放器有時onYouTubePlayerAPIReady()方法大火代碼運行。有沒有人有任何經驗或建議來處理這個問題？

Answer 1

編輯：基於反饋（@wuliwong）下述溶液解決在爭用情況原在OP的問題暗示在OP（包括例如代碼）：

$(document).bind 'custom-ready',() -> 

    ... custom initialization code ... 


# Ensure the 'custom-ready' is called only when both the document and the 
# YouTube player API are ready. As the order this will occur in is not 
# guarenteed the following code caters for both scenarios. 

# Cater for the document ready first scenario 
$ -> 
    window.onYouTubePlayerAPIReady =() -> 
     $(document).trigger('custom-ready') 

# Cater for YouTube player API ready first scenario 
window.onYouTubePlayerAPIReady =() -> 
    $ -> 
     $(document).trigger('custom-ready') 

我原來的答覆（對於上下文）：

我已經有什麼似乎是在過去的同樣的問題，但略有不同的設置，在我的情況下我加載//www.youtube.com/iframe_api。

在那種情況下，我能夠移動，關於YouTube播放器API專門依靠正準備進入window.onYouTubePlayerAPIReady回調的代碼，並使用後一個標準<script>包括，例如：

... script tags for non-youtube reliant code ... 
<script src="...jquery, plugins, site js..."></script> 

... youtube specific code followed by youtube api script tag... 
<script> 
    window.onYouTubeIframeAPIReady = function() { 
     $('.video-gallery').Gallery(); 
    } 
</script> 
<script src="//www.youtube.com/iframe_api"></script> 

不過，我相信另一個選擇是將觸發就緒狀態定製的事件，例如（在CoffeeScript的）：

$(document).bind 'custom-ready',() -> 
    ... code previously in ready event callback ... 

$ -> 

    # Check if the page includes the youtube player api (this could be 
    # achieved in any number of ways, here we assume a CSS class is 
    # applied to the page body as an indicator. 
    if $('body.uses-youtube-player-api').length == 0 

     # This page doesn't use the youtube player api so call the 
     # custom ready event now. 
     $(document).trigger('custom-ready') 

# If the page does load the youtube player api trigger our custom 
# ready event in the associated callback. 
window.onYouTubePlayerAPIReady =() -> 
    $(document).trigger('custom-ready') 

我沒有測試上面的例子中並因此它的我真的只是一個建議，因爲我想我以前的解決問題的原始示例在許多情況下並不理想。

回想起來，我認爲這個問題似乎是由YouTube瀏覽器緩存youtube播放器api代碼引起的。爲了證明這種情況，您可以使用隨機字符串來加載api播放器（例如，將?_ignore={insert random value}添加到script標籤src屬性的前綴），然後查看這是否可以解決問題，但是即使這樣做也不會有效解決方案，因爲它需要每次訪問時重新加載庫。