jquery - Async Javascript导致JS错误函数不存在

Question

我有一个 jQuery 脚本，我向其中添加了 ASYNC 属性。它在 Firefox 中似乎工作正常，但在 Chrome 和 IE 中间歇性失败。

用于加载添加异步属性的 PHP。这工作正常:

function add_async_attribute($tag, $handle) {
   if ( substr($handle,0,3) !== 'jch' )
      return $tag;
   return str_replace( ' src', ' async="async" src', $tag );
 }

 add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

导致ASYNC属性出现问题的JS文件:

jQuery(document).ready(function($) {    
    jQuery('.home #intro_reel').jchTextReel( {fadeTime: 16000} );       
});

jQuery.fn.extend({

    jchTextReel: function(options) {                
        var defaults = {
                fadeTime: 10000,
                mouseOverColor : '#000000',
                mouseOutColor : '#ffffff'
        }

        var options =  jQuery.extend(defaults, options);

          return this.each(function() {
          var o = options;      

          ....etc....

Chrome 显示错误“jchTextReel 不是函数”。

再次，删除 ASYNC 属性使脚本再次正常工作。或者，如果我按 F5 重新加载，脚本似乎可以工作。

为什么？我该如何解决？

Answer 1

您的文件正在异步加载。当它被加载时，文档准备就绪就已经被触发。这就是为什么您的顶级文档会立即执行并调用尚未定义的 jchTextReel 。要解决这个问题，您需要首先定义jchTextReel，然后进行调用。看来 Firefox 忽略了异步并同步加载文件，但 ie 和 chrome 则支持异步。