strategy for waiting until multiple scripts have loaded

[vesper8]

I'm loading multiple scripts and I want to defer my init function until all the scripts have finished loading

  mounted() {
    VueScript2.load('//unpkg.com/three').then(() => {
      setTimeout(() => {
        this.init();
      }, 1000);
    });
    VueScript2.load('//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/CopyShader.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/EffectComposer.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/RenderPass.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/ShaderPass.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/HorizontalBlurShader.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/VerticalBlurShader.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/FilmShader.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/LuminosityHighPassShader.js');
    VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/UnrealBloomPass.js');
    VueScript2.load('//cdn.rawgit.com/felixturner/bad-tv-shader/master/BadTVShader.js');
  },

As you see right now I'm just using a lame hack with a 1000ms timeout

Is there a way to use some kind of promise that will only return true once all 10 of these scripts have completed loading?

[taoeffect]

yeah I think you could use the await keyword in front of them all, or use Bluebird's Promise.all

[vesper8]

@taoeffect Thanks for letting me know about http://bluebirdjs.com/, seems like a very useful library for sure

I had a look at the .all() documentation http://bluebirdjs.com/docs/api/promise.all.html

But I'm not at all clear how I could use it with VueScript2

Would you mind sharing a short code snippet to demonstrate how I would use it to wait for two separate scripts to be loaded please? That would be very helpful!

Thanks

[vesper8]

I guess it's as simple as that!

    Promise.all([
      VueScript2.load('//unpkg.com/three'),
      VueScript2.load('//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/CopyShader.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/EffectComposer.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/RenderPass.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/ShaderPass.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/HorizontalBlurShader.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/VerticalBlurShader.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/FilmShader.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/shaders/LuminosityHighPassShader.js'),
      VueScript2.load('//unpkg.com/three@0.83.0/examples/js/postprocessing/UnrealBloomPass.js'),
      VueScript2.load('//cdn.rawgit.com/felixturner/bad-tv-shader/master/BadTVShader.js'),
    ]).then(() => {
      console.log('done loading all scripts');
      this.init();
    });

Very cool!