Question

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

用于加载的PHP添加async attrib。这很好用：

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显示错误＆＃39; jchTextReel不是函数＆＃39;。

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

为什么呢？我该如何解决？

Answer 1

正在异步加载您的文件。加载时，已触发文档就绪。这就是为什么你的顶级文件准备好立即执行并调用尚未定义的 jchTextReel 的原因。要解决它，您需要首先定义 jchTextReel 然后进行调用。似乎firefox忽略 async 并同步加载文件，即＆amp; chrome尊重异步。

Answer 2

async和defer是两个独立的布尔属性。执行async="defer"会将async设置为true，但defer未设置，所以我的猜测是有时脚本执行得太快。以下是add_async_attribute()的调整版，具有不同的async和defer属性：

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

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

此外，它未在发布的原始代码中显示，但正在运行的脚本使用jQuery，因此应将jquery指定为该脚本的依赖项。

Answer 3

在您的情况下，有两种方法可行 1.添加async="async"并将jQuery('.home #intro_reel').jchTextReel( {fadeTime: 16000} );放在文件的末尾（.js）
2.从.ready处理程序加载脚本。在这种情况下，不需要async属性。

$(document).ready(function($) {  
    $.getScript('path/to/script', function(){
       jQuery('.home #intro_reel').jchTextReel( {fadeTime: 16000} ); 
    });
});

异步Javascript导致JS错误函数不存在

3 个答案: