javascript - 如何强制按顺序加载脚本数组？

Question

我正在构建一个单页 Web 应用程序，每个“小部件”可能需要一个或多个 JavaScript 或 jQuery 库。其中一些脚本可能依赖于其他脚本，但如果我只是创建一系列 $.getScript 调用，它们可能会乱序加载。如何强制按顺序加载脚本，即进程在请求脚本 2 之前等待脚本 1 下载，等等？

Answer 1

您可以使用reduce脚本名称数组上的方法。

以下是此方法的示例:

// Load Script and return promise
function loadScript(script) {
  return $.getScript(script);
}
/**
 * Load list of scripts
 */
function loadScripts(scripts) {
  // Reduce, causes sequenctial order of execution
  return scripts.reduce(function(cur, next){
    // When promise is complete, return next promise (loadScript)
    return cur.then(function(){
      console.log(next);
      // Load the next script and return promise
      return loadScript(next);
    });
  }, $().promise() /* First promise is an empty promise */); 
}

( JSBin )

或者简而言之:

function loadScripts(scripts) {
    return scripts.reduce(function(cur, next){ 
        return cur.then($.getScript.bind($, next));
    }, $.when());
}
loadScripts(["./1.js","./2.js","./3.js").then(function(){ // example usage
    // all done here
});