異步Javascript導致JS錯誤函數不存在

我有一個jQuery腳本，我添加了一個ASYNC屬性。它似乎可以在Firefox中正常工作，但在Chrome和IE中間歇性失敗。異步Javascript導致JS錯誤函數不存在

PHP加載添加異步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);

導致一個問題，異步ATTRIB 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 attrib使腳本再次正常工作。或者，如果我按F5重新加載，腳本似乎工作。

爲什麼？我該如何解決？

來源

2016-09-16 jchwebdev

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應被指定爲依賴爲那個腳本。

來源

2016-09-16 19:54:09

我在我的代碼示例中犯了一個嚴重的錯誤。請參閱更正後的版本。它應該讀取'異步=「異步」'對不起。 – jchwebdev

我試過你的解決方案，沒有快樂。不過，將返回字符串更改爲「延遲」仍然有效。 – jchwebdev

沒關係。根據我[收集]（https://css-tricks.com/async-attribute-scripts-bottom/），最好爲第三方腳本保留「async」的使用，因爲依賴性的可能性增加的問題。所以我會放棄它，如果這些腳本已經在腳註中（這從發佈的代碼中不清楚），延遲也是不必要的。 –

在你的情況下，有兩種方法是可能的。
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}); 
    }); 
});

來源

2016-09-16 20:56:21

您的文件正在異步加載。當它被加載時，文檔就緒已經被觸發。這就是爲什麼您的頂級文檔準備好立即執行並呼籲尚未定義的jchTextReel。要解決它，您需要先定義jchTextReel然後再打電話。看起來firefox忽略異步和同步加載文件，但是，即& chrome尊重異步。

來源

2016-09-21 17:19:26

異步Javascript導致JS錯誤函數不存在

回答

相關問題