@peccul is peccu

(love peccu '(emacs lisp cat outdoor bicycle mac linux coffee))

JSを同時に読み込んだり、順に読み込んだり

ファイル毎に依存するコードを書いてしまって読み込み順をなんとかしたかった。 webpack使ったりする方が早いけども。

cdnからVue.jsとjQueryとSemantic UIを同時に読み込んで(キャッシュがあれば使う)、それが終わればfirst.jsとsecond.jsを順にキャッシュを無視して読み込む例。

'use strict';
const loader = function(queue, cb){
  var item = queue.shift();
  var script = document.createElement("script");
  document.getElementsByTagName("head")[0].appendChild(script);
  script.onload = function(){
    if(queue.length){
      return loader(queue, cb);
    }
    return cb();
  };
  script.src = item.src + (item.useCache ? '' : "?ts=" + new Date().getTime());
};
const parallel = [
  {src: '//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js', useCache: true},
  {src: '//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js', useCache: true},
  {src: '//cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.js', useCache: true}
];
var finish = parallel.length;
const queue = [
  {src: './first.js', useCache: false},
  {src: './second.js', useCache: false},
];

// parallelが全て読み込まれれば(finish==0)、queueを順に読み込む
const loadQueue = function(){
  finish -= 1;
  if(finish === 0){
    loader(queue, function(){});
  }
};

// parallelを同時に読み込み、コールバックに↑のloadQueueを指定
parallel.map(function(e, i, a){
  loader([e], loadQueue);
});

参考URL

stackoverflow.com