等待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属性的前缀），然后查看这是否可以解决问题，但是即使这样做也不会有效解决方案，因为它需要每次访问时重新加载库。