warten, bis die Bedingung erfüllt ist Javascript

Question

Ich entwickelte jqueryui Plugin. Ich habe ein Skript, das prüft, ob bestimmte Bibliotheken nicht hinzugefügt werden, dann füge es hinzu. Ich verwende setTimeOut, um Bibliotheken in einer Sequenz hinzuzufügen. Hier ist mein Code:

if(typeof jQuery === 'undefined'){ //check if jQuery Exists 

    console.log("jQuery not loaded"); 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src", 
     "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); 

    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 

    console.log("jQuery loaded"); 

} 

setTimeout(function(){ 
if (typeof jQuery.ui === "undefined"){ 

    console.log("jQueryUI not loaded"); 
    var script_tag2 = document.createElement('script'); 
    script_tag2.setAttribute("type","text/javascript"); 
    script_tag2.setAttribute("src", 
     "http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"); 

    (document.getElementsByTagName("head")[0]).appendChild(script_tag2); 


} 
}, 500); 

Aber das Problem ist, dass, weil es viele Bibliotheken gibt es zu viel Zeit in Anspruch nimmt. Und wenn ich Zeit reduziere, bekomme ich Fehler, dass vorherige Bibliothek nicht hinzugefügt wird. Anstatt eine Nummer zu übergeben, um die Timeout-Funktion zu setzen. Ich möchte eine Funktion übergeben, die überprüft, ob vorherige Bibliothek geladen ist, und dann diese Bibliothek hinzufügen. Ich hoffe, dass Sie über meine Abfrage verstehen werden.

Dank

Answer 1

if(typeof jQuery === 'undefined'){ //check if jQuery Exists 

    console.log("jQuery not loaded"); 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src", 
     "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); 
    script_tag.setAttribute("onload", "loadJQueryUI()"); 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 


} 
function loadJQueryUI() { 
    if (typeof jQuery.ui === "undefined"){ 
     console.log("jQueryUI not loaded"); 
     var script_tag2 = document.createElement('script'); 
     script_tag2.setAttribute("type","text/javascript"); 
     script_tag2.setAttribute("src", 
      "http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"); 
     (document.getElementsByTagName("head")[0]).appendChild(script_tag2); 
    } 
} 

Answer 2

Ihre beste Wette ist online für eine kleine js Lader suchen, sonst wird der Code unter der Art von Layout ist, dass Sie so viele Skripte nacheinander geladen werden müssen. Es ist weder vollständig noch wird es getestet. Aber es zeigt die Prinzipien.

// 
// 
// This is a very basic loader, you can specify the scripts to load as 
// below, I would not bother doing this 
// since you can get some very neat js loaders pre built. 
// But this demonstrates how an async loader can work. 
// 
// 
var depends = [{"name": "jQuery", "src": "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"},{{"name": "jQuery.Ui", "src": "http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"}}]; 

var asyncLoop = function(o){ 
    var i=-1; 

    var loop = function(){ 
     i++; 
     if(i==o.length){o.callback(); return;} 
     o.functionToLoop(loop, i); 
    } 
    loop();//init 
} 

asyncLoop({ 
    length : depends.length, 
    functionToLoop : function(loop, i){ 

      // DON'T USE EVAL 
      // I would prefer to write a helper to check if the 
      // library is in scope, this would require a function to circle dot notation 
      // and check the object is in scope ie jQuery.UI or something.something.here. 
      // 
      if (eval([depends[i].name]) return loop(); 
      var script_tag = document.createElement('script'); 
      script_tag.setAttribute("type","text/javascript"); 
      script_tag.setAttribute("src", depends[i].src 
      (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
      // 
      // Load next script on load, this needs a timeout so we can fail gracefully 
      // 
      script_tag.onload = function(){ 
       loop(); 
      } 

    }, 
    callback : function(){ 
     console.log("loaded"); 
    }  
}); 

Answer 3

Vielleicht könnten Sie versuchen Rekursion mit setTimeout();

waitUntilConditionIsMet() { 
    if (this.jQueryLibraryExists) { 
     setTimeout(this.waitUntilConditionIsMet(), 500); 
    } else { 
     // add logic for adding jQuery Library 
    } 
}