Question

这应该很简单，但很多旧的答案似乎都有点错误。我希望能够加载一个库，一些插件和一些异步代码，但要确保他们按顺序执行。

这种事情不起作用，因为脚本会在它们被加载时执行，这可能不是按列出的顺序执行的：

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：＆＃34; script＆＃34;：将响应评估为JavaScript并将其作为纯文本返回。

换句话说，加载和执行似乎是完全耦合的。有没有一种干净的方法来处理这种深层嵌套依赖的情况，只使用jquery，没有额外的脚本加载库？

Answer 1

您可以尝试使用Async.js系列方法，但最初用于Node.js，它也适用于浏览器。

所以基本上你可以做类似

的事情

async.series([
    function(callback){
        // do some stuff ...
        callback(null, 'one');
    },
    function(callback){
        // do some more stuff ...
        callback(null, 'two');
    }
],// optional callback
function(err, results){
        // results is now equal to ['one', 'two']
});

使用jquery ajax控制执行顺序

1 个答案: