JavaScript
jQuery

複数の外部スクリプトを順番に取り込んだ後に処理する

More than 1 year has passed since last update.

jQuery と jQueryUI のように依存関係のあるライブラリがあって、それを動的に取り込みたい場合があった。
jQuery.getScript()を使って外部スクリプトを取り込むとこうなる。

ネスト地獄
$.getScript("A.js").done(function{
  $.getScript("B.js").done(function{
    // AとBを使った処理
  });
});

ネストが嫌だ。なので処理を作った。

jQueryに追加
$.getScripts = function(scriptUrls){
  const d = $.Deferred();
  function _getScripts(urls) {
    const url = urls.shift();
    $.getScript(url)
      .done(function(){
        if (urls.length > 0) {
          _getScripts(urls);
        } else {
          d.resolve();
        }
      })
      .fail(function(){
        d.reject();
      });
  }
  _getScripts(scriptUrls);
  return d.promise();
}

$.getScripts(["A.js", "B.js"]).done(function(){
  // AとBを使った処理
});