1

I am working on a mechanism to dynamically load a set of js files that have some dependencies between them (e.g., my code after bootstrap after jquery). I defined a nested json type structure with the dependency relationships and then invoke a Promise based loadscript mechanism (thanks to some of the posts here) that makes async calls to load js files that are at the same level and invokes a recursive loadscript for js files that have dependencies between them.

The files are all correctly appended to HEAD in the order that i expect them to be. For the dependencies, i invoke loading a file for which there is a dependency in the onload handler of its predecessor. However, this does not seem to guarantee that the loaded js code is available to use (i.e., did not seem that the append had completed and the code been executed - e.g., var/const definitions were not available at the time of onload being invoked based on break points, etc... in debugger - i guess this seems correct).

So, added a mutationobserver that observed that the files were added to the DOM (e.g., childList change to HEAD). However, it appears that the mutation is invoked before the code is actually available for use.

Why do i think this? i put break points, console logs with timing info, etc.. at the point where the mutationObserver indicated that a change corresponding to the insertion of the newly loaded script had occurred (e.g., the observer firing because of the script added) but at that point, the code (e.g., some var definition) was not available in the globals in the debugger.

So, the question is not specific about my code but more about whether it is possible to know that the dynamically included js code has run and is available to use. For my own code i can handle this through other mechanisms but for third party js files i do not want to touch them.

So, more specifically, it does not seem that the actual appending of code to the DOM HEAD at the point detected by the mutationObserver actually means that the code has been executed and that it seems from other posts (e.g., Execution of dynamically loaded JS files or load and execute order of scripts ) that the actual execution of the code is somewhat asynchronous depending on what the browser is actually doing.

Any thoughts on the overall process understanding would be greatly appreciated.

Thanks,

SBG
  • 297
  • 3
  • 16
  • Why not just use a modern bundler that can do all this for you like Webpack? – CertainPerformance May 30 '18 at 08:35
  • 1
    A DOM script element's onload event is fired when the script is loaded and executed so there's no need for MutationObserver and the behavior you observe is either caused by a mistake in your code or that other script being asynchronous in which case there's no universal solution. – wOxxOm May 30 '18 at 10:20
  • thanks - will take a look at webpack and see how it is as i bring in some fairly large third party js files when the app is launched. Also, found this link https://jeremenichelli.io/2016/04/patterns-for-a-promise-based-initialization/ which also provides a perspective based on react and uses a similar promises based approach - this supports #wOxxOm's perspective on execution already having happen by onload being called. Will continue to test and update. – SBG May 30 '18 at 13:56
  • On further testing and tweaking of code, as indicated by #wOxxOm the execution appears to be done by onload and the mutationObserver is not needed (was helpful in debugging). a related and interesting article http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/ - thanks! – SBG May 30 '18 at 15:58

0 Answers0