Javascript, execute scripts code in order inserted into dom tree -

not duplicate have yet found satisfying answer on other threads:

• load , execute javascript code synchronously
• loading html , script order execution
• load , execute javascript code synchronously

---

looking native javascript answers, no jquery, no requirejs, , forth please :)

---

summary of entire question:

i want asynchronously load scripts have ordered execution

i trying enforce code in inserted script elements execute in same order added dom tree.

that is, if insert 2 script tags, first , second, code in first must fire before second, no matter finishes loading first.

i have tried async attribute , defer attribute when inserting head doesn't seem obey.

i have tried element.setattribute("defer", "") , element.setattribute("async", false) , other combinations.

the issue experiencing has when including external script, test have performed there latency.

the second script, local 1 is fired before first one, though inserted afterwards in dom tree ( head ).

a) note still trying insert both script elements dom. ofcourse above achieved inserting first, let finish , insert second one, hoping there way because might slow.

my understanding requirejs seems doing this, should possible. however, requirejs might pulling off doing described in a).

code if try directly in firebug, copy , paste:

    function loadscript(path, callback, errorcallback, options) {             var element = document.createelement('script');             element.setattribute("type", 'text/javascript');             element.setattribute("src", path);              return loadelement(element, callback, errorcallback, options);     }      function loadelement(element, callback, errorcallback, options) {             element.setattribute("defer", "");             // element.setattribute("async", "false");              element.loaded = false;              if (element.readystate){  // ie                     element.onreadystatechange = function(){                             if (element.readystate == "loaded" || element.readystate == "complete"){                                     element.onreadystatechange = null;                                      loadelementonload(element, callback);                             }                     };             } else {                 // others                     element.onload = function() {                             loadelementonload(element, callback);                     };             }              element.onerror = function() {                     errorcallback && errorcallback(element);             };              (document.head || document.getelementsbytagname('head')[0] || document.body).appendchild(element);              return element;     }      function loadelementonload(element, callback) {             if (element.loaded != true) {                     element.loaded = true;                     if ( callback ) callback(element);             }     }     loadscript("http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js",function() {   alert(1);   })  loadscript("http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/cfinstall.min.js",function() {   alert(2);   }) 

if try above code in firebug, fire 2, , 1. want ensure 1 , 2 include both in head.

ok, think have came solution.

the trick keep track of each script loaded , order insert them dom tree. each of callback registered accordingly element.

then keep track of when has finished loading , when have, go through stack , fire callbacks.

var stack = []; stack.loaded = 0; function loadscriptnew(path, callback) {         var o = { callback: callback };         stack.push(o);          loadscript(path, function() {                 o.callbackargs = arguments;                 stack.loaded++;                 executewhenready();         }); }  function executewhenready() {         if ( stack.length == stack.loaded ) {                 while(stack.length) {                         var o = stack.pop();                         o.callback.apply(undefined, o.callbackargs);                 }                  stack.loaded = 0;         } } 

// above has been added code in question.

function loadscript(path, callback) {         var element = document.createelement('script');         element.setattribute("type", 'text/javascript');         element.setattribute("src", path);          return loadelement(element, callback); }  function loadelement(element, callback) {         element.setattribute("defer", "");         // element.setattribute("async", "false");          element.loaded = false;          if (element.readystate){  // ie                 element.onreadystatechange = function(){                         if (element.readystate == "loaded" || element.readystate == "complete"){                                 element.onreadystatechange = null;                                  loadelementonload(element, callback);                         }                 };         } else {                 // others                 element.onload = function() {                         loadelementonload(element, callback);                 };         }          (document.head || document.getelementsbytagname('head')[0] || document.body).appendchild(element);          return element; }  function loadelementonload(element, callback) {         if (element.loaded != true) {                 element.loaded = true;                 if ( callback ) callback(element);         } }  loadscriptnew("http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js",function() {         alert(1); });  loadscriptnew("http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/cfinstall.min.js",function() {         alert(2); }); 

ok, of might argue there missing info in question, give , here solving callback. right. code in script still executed in wrong order, callback now.

but me enough, intend wrap code loaded in method call, alá amd, such require or define call , put on stack there, , fire them in callback instead.

i still hoping out asad , iframe solution, believe might provide best answer question. me though, solution solve problems :)