getScript 创建 ReferenceError
getScript creates ReferenceError
在开始我的其余代码之前,我有一些 js 脚本加载到我的 main.js
中。然而,在测试过程中,我注意到有时它会产生以下引用错误(8 个页面加载中有 1 个或类似错误)。
ReferenceError: createContainer is not defined
现在,我能想到的出现此错误的唯一原因是当我执行 startScript()
函数时,并非我的所有文件都已加载或完全可访问。
现在,也许我将其他 .js 文件包含到我的 main.js
中是完全错误的,所以我想听听您对此的看法。
main.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);
}
});
问题是因为您正在加载 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);
}
在开始我的其余代码之前,我有一些 js 脚本加载到我的 main.js
中。然而,在测试过程中,我注意到有时它会产生以下引用错误(8 个页面加载中有 1 个或类似错误)。
ReferenceError: createContainer is not defined
现在,我能想到的出现此错误的唯一原因是当我执行 startScript()
函数时,并非我的所有文件都已加载或完全可访问。
现在,也许我将其他 .js 文件包含到我的 main.js
中是完全错误的,所以我想听听您对此的看法。
main.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);
}
});
问题是因为您正在加载 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);
}