jquery - 动态加载 jQuery 偶尔会抛出 jQuery is undefined 错误

Question

我们有动态加载的 jQuery。这是因为我们的遗留代码没有母版页，并且当我们决定开始使用 jQuery 时，所有此类遗留代码都已经引用了一个常见的 js 文件。因此，我们没有添加对数百个文件的引用，而是更新了现有文件以执行以下操作:

function loadjscssfile(filename) {
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)

    if (typeof fileref != "undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}
function getRelPath() {
    for (var t = "", n = 0, n = 0; n < document.location.pathname.split("/").length - 3; n++) t += "../";
    return (t)
}

loadjscssfile(getRelPath() + "JavaScript/jquery-1.10.1.js");
loadjscssfile(getRelPath() + "JavaScript/jquery.formatCurrency.js");
loadjscssfile(getRelPath() + "DataValidationFunctions2.js"); 

现在我们已经做到了这一点，我们偶尔会收到“jQuery 未定义”错误，通常来自 jquery.formatCurrency.js。当我们没有收到该错误时，jQuery 工作正常，当我们收到该错误时，它根本不起作用。这是从同一浏览器(IE10)这一时刻到下一时刻的零星现象。由于动态代码以正确的顺序加载 jquery-1.10.1.js ~ 和 ~ jquery.formatCurrency.js，我认为代码必须在后者之前成功上传前者。

我们还更新了 IIS，以关闭 jQuery 所在的 JavaScript 文件夹上的动态和静态内容压缩，因为我在某处读到可能会导致此问题。我清除了所有缓存，但问题仍然存在。

Answer 1

您正在异步加载脚本，因此不能保证它们会按所需的顺序加载。因此，您应该添加回调功能，以便确保脚本在下一个开始之前已完成加载。

function loadjscssfile(filename, callback) {
    var fileref = document.createElement('script');
    fileref.onreadystatechange = fileref.onload = function () {

        var state = fileref.readyState;

        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;
            callback();
        }
    };
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);

    if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref);

}

function getRelPath() {
    for (var t = "", n = 0, n = 0; n < document.location.pathname.split("/").length - 3; n++) t += "../";
    return (t)
}

loadjscssfile(getRelPath() + "JavaScript/jquery-1.10.1.js",function(){
    loadjscssfile(getRelPath() + "JavaScript/jquery.formatCurrency.js",function(){        
        loadjscssfile(getRelPath() + "DataValidationFunctions2.js");
    });
});