如何按顺序加载外部脚本

时间:2014-07-14 11:41:42

标签: jquery

有没有人有类似的经历?我发现jQuery没有按顺序加载脚本。下面是我调用的脚本,我不知道调用代码的顺序是什么。在代码中,首先调用validation.js,然后调用c_validation.js,但在Chrome Javascript控制台中,加载脚本的结果将被反转。它是由脚本的大小引起的吗?如何强制逐个加载脚本?

    $("#tab-4-content").load("/reg.php?id="+this.id+"&ads="+$(this).data('ads')+"&f="+$(this).data('file')+"&mid="+$(this).data('mid'));
    var url = "http://mydomain.com/validation.js";
    $.getScript(url) 
    .done(function() {
        console.log( "Success load validation");
    })
    .fail(function() {
        console.log("Failed load validation");
        });
    var url = "js/c_validate.js";
    $.getScript(url)
        .done(function() {
            console.log("Success load c_validate.js");
        })
        .fail(function() {
            console.log("Failed load c_validate.js");
        });
    $.mobile.changePage("#tab-4");
    $("#terms").html("/dev/terms.inc.html");
}); // tab-3-content click

XHR finished loading: GET "http://dev.mydomain.com/c_by_cat.inc.php?id=code". jquery.js:10306
http://mydomain.com/validation.js js.php?id=code:92
XHR finished loading: GET "http://dev.mydomain.com/js/c_validate.js?_=1405324184667". jquery.js:10306
Failed load c_validate.js js.php?id=code:106
XHR finished loading: GET "http://dev.mydomain.com/reg.php?id=3&ads=1&f=3.png&mid=2". jquery.js:10306
Success load validation 

1 个答案:

答案 0 :(得分:1)

这是因为您触发并行请求。你可以使用类似的东西:

var get_scripts_in_order = function(urls, def) {
    if (def === undefined) {
        def = $.Deferred();
    }
    var url = urls.pop();
    if (url === undefined) {
        def.resolve();
    } else {
        $.getScript(url)
            .done(function() {
                get_scripts_in_order(urls, def);
            })
            .fail(function() {
                def.reject(url);
            });
    }
    return def.promise();
};

get_scripts_in_order(["script3.js", "script2.js", "script1.js"])
    .done(function() {
        console.log("loaded all scripts");
    })
    .fail(function(url) {
        console.log("fail: "+url);
    });

请注意,由于.pop,网址的顺序会相反。

有一个有趣的jQuery插件可能对你有所帮助:

https://github.com/gnarf/jquery-ajaxQueue