这应该很简单,但很多关于 SO 的旧答案似乎有点错误。我希望能够异步加载库、一些插件和一些代码,但要确保它们按顺序执行。
这种事情是行不通的,因为脚本在加载时执行,可能不在列出的顺序中:
if (someCondition) {
$.ajax({
url: "theLibrary.js",
dataType: "script",
cache: true,
success: function(data) {
console.log("library loaded and executed");
}
});
$.ajax({
url: "thePlugin.js",
dataType: "script",
cache: true,
success: function(data) {
console.log("plugin loaded and executed");
}
});
$.ajax({
url: "theCode.js",
dataType: "script",
cache: true,
success: function(data) {
console.log("code loaded and executed");
}
});
}
对此的第一个尝试可能是将依赖项嵌套在回调中,如下所示:
if (someCondition) {
$.ajax({
url: "theLibrary.js",
dataType: "script",
cache: true,
success: function(data) {
console.log("library loaded and executed");
$.ajax({
url: "thePlugin.js",
dataType: "script",
cache: true,
success: function(data) {
console.log("plugin loaded and executed");
$.ajax({
url: "theCode.js",
dataType: "script",
cache: true,
success: function(data) {
console.log("code loaded and executed");
}
});
}
});
}
});
}
现在这解决了执行问题(虽然读起来很麻烦),但现在的问题是loading
第二个和第三个脚本在加载和执行前一个脚本时被搁置了。换句话说,加载和执行没有完全解耦。
似乎没有延迟执行的选项.ajax
或其速记继子。.getScript
从文档:
dataType: "script": 将响应评估为 JavaScript 并将其作为纯文本返回。
换句话说,加载和执行似乎是完全耦合的。有没有一种干净的方法来处理这种深度嵌套依赖关系的情况,只使用 jquery,而不需要额外的脚本加载库?