getScript 创建 ReferenceError

Posted 2023-02-16

【中文标题】getScript 创建 ReferenceError

【英文标题】：getScript creates ReferenceError

【发布时间】：2015-10-06 22:54:17

【问题描述】：

我有一些 js 脚本，在我开始我的其余代码之前，我将它们加载到我的 main.js 中。然而，在测试过程中，我注意到有时它会产生以下参考错误（8 个页面加载中有 1 个）。

ReferenceError: createContainer is not defined

现在，我能想到出现此错误的唯一原因是，当我执行 startScript() 函数时，并非所有文件都已加载或完全可访问。

现在，也许我将其他 .js 文件包含在我的 main.js 中是错误的，所以我想听听您对此的看法。

ma​​in.js 如下所示：

$(document).ready(function() 

    //sets and array of files that should be loaded before anything every happens
    var arrFilesToLoad = [  'scripts/global/variables.js',
                            'scripts/global/objects.js',
                            'scripts/global/classes.js'];
    var _error;

    //walks through the array of items that should be loaded and checks for fails
    $.each(arrFilesToLoad , function (key) 
        $.getScript(arrFilesToLoad[key])
            //when a file is loaded with succes
            .done(function () 
                //on default send a message to the console
                console.log(arrFilesToLoad[key] + 'loaded succesfully');
                //if every item is loaded start the script
                if(key == (arrFilesToLoad.length - 1))
                    startScript();
                
            )
            //when a file fails to load
            .fail(function () 
                //add the file that failed to load to a string message
                _error += arrFilesToLoad[key] + " - failed to load. \n";
                //show an alert with what file failed to load
                if(key == (arrFilesToLoad.length - 1))
                    alert(_error);
                
            );
    );

    function startScript () 
        //set a variable which contains a function that returns a DIV with styling
        var oContainer = createContainer();
        var oMainMenu = new Menu(arrMainMenu);
        $(oContainer).append(createMenu(oMainMenu));
        $('body').append(oContainer);
    

);

【问题讨论】：

在函数调用时，尚未加载定义createContainer的文件。

createContainer() 是否在您加载的脚本之一中定义？如果有，是哪一个？

@RoryMcCrossan 它必须在其中一个文件中定义，因为它只发生 8 次中的 1 次。

在您的代码中，完成回调中的key 应该始终是each 循环设置的最后一个。关闭将解决它。也就是说，罗里的答案会更好

【参考方案1】：

问题是因为您正在加载 3 个脚本，并且可能只有其中一个拥有 createContainer() 函数，但您在加载最后一个请求时执行您的代码。这意味着你有一个竞争条件。最后一个请求不能保证是最后一个完成的请求。如果在最终请求完成时仍在加载其他脚本，您将看到此错误。

您可以修改逻辑，以便仅在所有脚本加载后才执行回调。试试这个：

var requests = [];
$.each(arrFilesToLoad , function (key) 
    requests.push($.getScript(arrFilesToLoad[key]));
);

$.when.apply(this, requests)
    .done(startScript)
    .fail(function() 
        console.log('one or more scripts failed to load');
    );

function startScript() 
    var oContainer = createContainer();
    var oMainMenu = new Menu(arrMainMenu);
    $(oContainer).append(createMenu(oMainMenu));
    $('body').append(oContainer);

【讨论】：

工作就像一个魅力，我已经刷新了几次页面，它每次都显示我期望的内容。您能否向我解释一下这段代码是如何工作的，因为我对 JQuery 还很陌生。

很高兴为您提供帮助。这与您的原始代码相似，不同之处在于它将$.getScript 返回的promise 对象存储在一个数组中，然后将其提供给$.when。这意味着不是为每个完成的请求执行done() 回调，而是在所有请求完成时执行一次。

我明白了，非常感谢您快速及时的回复。