如何在使用jQuery動態加載JavaScript類文件時避免執行延遲競爭條件？

我現在有大約6個JS類文件。而不是把一堆的標籤，我用jQuery動態加載它們 - 爲了 - 就像這樣：如何在使用jQuery動態加載JavaScript類文件時避免執行延遲競爭條件？

var classes = ["A","B","C"...]; 
blah.load = function(callback) { 
    for (var i in classes) { 
     console.log("Loading "+blah.RootURL+"/"+classes[i]+".js"); 
     $.ajax({ 
      async: true, 
      url: blah.RootURL+"/"+classes[i]+".js", 
      dataType: "script", 
      error: function(jqxhr, status, error) { 
       console.log("Unable to load "+classes[i]+": "+status+", "+error); 
      }, 
      success: function(data, status, xhr) { 
       if (window.tmpLoadCount) { 
        window.tmpLoadCount++; 
       } else { 
        window.tmpLoadCount = 1; 
       } 

       if (window.tmpLoadCount == classes.length) { 
        console.log("Initializing..."); 
        callback(); 
       } 
      } 
     }); 
    } 
};

目前我使用多個腳本標記，這樣我就可以繼續工作。我使用jQuery方法時遇到的問題是，有時在重新加載時，以前的腳本在下一個腳本加載之前似乎沒有執行（或完成執行），即使使用async: true。我的課程非常簡短。我會看到腳本通過「加載」日誌加載，但後來看到一個錯誤，如「無法加載B：A不是構造函數」（如果B繼承自A），這向我建議A不完全當執行B.prototype=new A();行時加載。

我發現一個參考這個網上，並且建議增加setTimeout()電話給發動機的一段時間，並建議在jQuery的「成功」回調處理的東西時，這只是發生...不幸的是我不知道如何確保以動態的方式按順序加載所有內容，而不使用成功回調。

除了許多<script/>標籤或縮小（這使得調試更困難）或需要類更改，有沒有人有如何幹淨地避免這種「競爭條件」的建議？我目前的想法，我不太喜歡，是讓每個類文件的最後一行將它的類名稱添加到全局靜態屬性中，並讓ajax調用使用間隔來檢查該屬性以確定它是否應該加載下一個文件......呃。

來源

2012-04-16 Josh

什麼是你的回調（）函數在做什麼？ – 2012-04-16 15:04:10

您可以嘗試查看像LABjs或Requirejs這樣的腳本加載器。 – Pointy 2012-04-16 15:04:58

請訪問http://requirejs.org/ – Alnitak 2012-04-16 15:05:12

你可以在目前的senario中做的一件事情是隻有當禮物完成時才調用下一個腳本的加載。即在success函數是這樣的。

function something(i){ 
    $.ajax({ 
       async: true, 
       url: blah.RootURL+"/"+classes[i]+".js", 
       dataType: "script", 
       error: function(jqxhr, status, error) { 
        console.log("Unable to load "+classes[i]+": "+status+", "+error); 
       }, 
       success: function(data, status, xhr) { 
        if (window.tmpLoadCount) { 
         window.tmpLoadCount++; 
        } else { 
         window.tmpLoadCount = 1; 
        } 
    something(window.tmpLoadCount); 
        if (window.tmpLoadCount == classes.length) { 
         console.log("Initializing..."); 
         callback(); 
        } 
       } 
      }); 
}

來源

2012-04-16 15:11:10

RequireJS實際上是專爲這種情況。你應該認真考慮使用它。我個人認爲this blog post by Aaron Hardy是一個更好，更簡短，更清晰地描述了RequireJS是什麼以及如何使用它的實際內容，而不是他們自己的文檔中實際包含的內容。你可能需要花幾分鐘的時間來閱讀，我想你會發現它是一個很好的解決方案。

來源

2012-04-16 15:16:31

如何在使用jQuery動態加載JavaScript類文件時避免執行延遲競爭條件？

回答

相關問題