I have two external javascript files within my html page.
I need to make sure that the first file, script1.js, is run before my second script, script2.js.
I have them within the body of my html page; how can I ensure that script2 is not used until the functions in script1 are run?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script>
<!-- Script 2 -->
<script src="js/script2.js"></script>
</body>
</html>
The browser will execute the scripts in the order it finds them. If you call an external script, it will block the page until the script has been loaded and executed.
So if your code is :
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script>
<!-- Script 2 -->
<script src="js/script2.js"></script>
</body>
Script 1 will be run before Script 2.
<script> tag manage it for you... but read on...
JavaScript is synchronous, that means things it will executed line by line by default...
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script> <!-- first gets executed and get finished -->
<!-- Script 2 -->
<script src="js/script2.js"></script> <!-- then second gets executed and get finished -->
</body>
</html>
But at the same JavaScript could be asynchronous too...
So there is an attribute for <script> tag which make the loading asynchronous... async attribute on script tag...
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Script 1 -->
<script src="js/script1.js" async></script> <!-- load asynchronously -->
<!-- Script 2 -->
<script src="js/script2.js" async></script> <!-- load asynchronously -->
</body>
</html>
Definition and Usage
The async attribute is a boolean attribute.When present, it specifies that the script will be executed asynchronously as soon as it is available.
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:
If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer is present: The script is executed when the page has finished parsing If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
You can't check if it was running. You could only watch the loading with jQuery and append the second script whenever it's finisished.
HTML:
<script id="first" src="js/script1.js"></script>
JS:
$("#first").on("load", function() {
$("head").append('<script src="js/script2.js"></script>');
});
#first is already loaded the time you attatch the event listener i don't think this will work.
Te ensure you load all your scripts in the proper way, you have to use some dependency handling library, like RequireJS, that allow you to execute the code just when your declared dependencies are loaded properly.
If you prefer, you could do it by yourself using something like jQuery.getScript, or do it in all javascript take that as an example.
I understand that you're using javascript, but if you have jQuery, you can use (2) document.ready functions like so, and load those script files. Each document.ready will queue (using deferred) for each one.
$(function() { // same as document.ready
$.getScript('script1.js');
});
$(function() {
$.getScript('script2.js');
});
Taken from:
$.getScript('script2.js'); is call after $.getScript('script1.js'); but the first one can takes more time than second one to complete
function loadJS(file) {
// DOM: Create the script element
var jsElm = document.createElement("script");
// set the type attribute
jsElm.type = "application/javascript";
// make the script element load file
jsElm.src = file;
// finally insert the element to the body element in order to load the script
document.body.appendChild(jsElm);
}
myScript.src = 'http://code.jquery.com/jquery-2.1.4.min.js';
myScript.onload = function() {
loadJS("js/script2.js")
};
Your first script add new function .
function firstScriptFunction(){
//i have done nothing here
}
Your Html page
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script>
<!-- Script to load script 2 -- >
<script type="text/javascript">
function loadSecondScript() {
if (!(typeof firstScriptFunction == 'function')) {
window.setTimeout(loadSecondScript, 3000);
}
else {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'js/script2.js';
document.getElementsByTagName('body')[0].appendChild(script);
}
}
$(document).ready(function(){
loadSecondScript();
});
</script>
</body>
</html>
You can use jquery and try something like below reference - https://api.jquery.com/jquery.getscript/
$.getScript("js/script1.js", function() {
console.log("script 1 loaded");
$.getScript("js/script2.js", function() {
console.log("script 2 loaded");
});
});
script1.jswill fire beforescript2.js.