等到条件为真 javascript

Question

我正在开发 jqueryui 插件。 我有一个脚本，它检查是否未添加某些库然后添加它。我正在使用 setTimeOut 按顺序添加库。这是我的代码：

  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);

但问题是因为有很多库，所以需要太多时间。如果我减少时间，那么我会得到错误，即没有添加以前的库。而不是将数字传递给 settimeout 函数。我想传递一个函数来检查是否加载了以前的库然后添加这个库。 我希望这能让您了解我的查询。

谢谢

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

你最好的选择是在网上搜索一个小的 js 加载器，否则下面的代码就是你需要按顺序加载尽可能多的脚本的那种布局。它不完整，也没有经过测试。但它显示了原则。

//
//
// 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

也许你可以尝试使用setTimeout();的递归

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