{"id":208,"date":"2017-03-24T14:05:44","date_gmt":"2017-03-24T14:05:44","guid":{"rendered":"https:\/\/federicojacobi.com\/?p=208"},"modified":"2017-03-24T14:05:44","modified_gmt":"2017-03-24T14:05:44","slug":"run-javascript-that-depends-on-multiple-remote-assets","status":"publish","type":"post","link":"https:\/\/federicojacobi.com\/2017\/03\/24\/run-javascript-that-depends-on-multiple-remote-assets\/","title":{"rendered":"Run javascript that depends on multiple remote assets"},"content":{"rendered":"<p>Async JS is the way of the present (and future). We MUST load all of our scripts async. They are getting heavy and slow, and the browser needs help, specially on mobile devices. Why wouldn&#8217;t you want your page to load faster (see <a href=\"https:\/\/federicojacobi.com\/how-to-make-sync-javascript-assets-work-async\/\">this post<\/a>).<\/p>\n<p>As web pages grow more and more complex, the idea of a single script that does everything is Jurassic. But what if we want to run code that depends on multiple scripts at the same time? If your app\/site is complex you should look into <a href=\"http:\/\/requirejs.org\/\">requireJS<\/a>. If you need something less daunting &#8230; I got you (with jQuery):<\/p>\n<pre class=\"lang:js decode:true\" title=\"depends on multiple remote scripts\">$.when(\n\t$.getScript( 'myscript1.js' ),\n\t$.getScript( 'myscript2.js' ),\n\t$.getScript( 'myscript3.js' ),\n\n\t$.Deferred( function( deferred ) {\n\t\t$( deferred.resolve );\n\t})\n).done( function( script1, script2, script3 ) {\n\t\/\/ Do whatcha gotta do, all 3 scripts are loaded now\n\t\n} );<\/pre>\n<p>Neat right? &#8230; Let&#8217;s kick it up a notch. Say we need the script AND some external data file:<\/p>\n<pre class=\"lang:js decode:true \" title=\"scripts and data files\">$.when(\n\t$.getScript( 'myscript1.js' ),\n\t$.getScript( 'myscript2.js' ),\n\t$.getScript( 'myscript3.js' ),\n\t$.ajax( 'myData.json' ),\n\n\t$.Deferred( function( deferred ) {\n\t\t$( deferred.resolve );\n\t})\n).done( function( script1, script2, script3, myData ) {\n\t\/\/ Do whatcha gotta do, all 3 scripts and data file are in\n\t\n} );<\/pre>\n<p>And now the cherry on top &#8230; we want to load myData.json\u00a0or yourData.json or just nothing conditionally:<\/p>\n<pre class=\"lang:default decode:true\" title=\"conditionally load data file async style\">var theCondition = 1;\n\n$.when(\n\t$.getScript( 'myscript1.js' ),\n\t$.getScript( 'myscript2.js' ),\n\t$.getScript( 'myscript3.js' ),\n\t( function() {\n\t\tif ( 1 === theCondition )\n\t\t\treturn $.ajax( 'myData.json' );\n\t\t\n\t\tif ( 2 === theCondition )\n\t\t\treturn $.ajax( 'yourData.json' );\n\t} )(),\n\n\t$.Deferred( function( deferred ) {\n\t\t$( deferred.resolve );\n\t})\n).done( function( script1, script2, script3, theData ) {\n\t\/\/ Do whatcha gotta do, all 3 scripts and data file depends on the theCondition variable\n\t\n} );<\/pre>\n<p>&nbsp;<\/p>\n<p>I&#8217;m sure you can do something similar on vanilla JS &#8230; but if you need something like this, chances are you are running jQuery.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Async JS is the way of the present (and future). We MUST load all of our scripts async. They are getting heavy and slow, and the browser needs help, specially on mobile devices. Why wouldn&#8217;t you want your page to load faster (see this post). As web pages grow more and more complex, the idea&#8230;  <a class=\"excerpt-read-more\" href=\"https:\/\/federicojacobi.com\/2017\/03\/24\/run-javascript-that-depends-on-multiple-remote-assets\/\" title=\"ReadRun javascript that depends on multiple remote assets\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,8],"tags":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts\/208"}],"collection":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":0,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"wp:attachment":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}