Javascript: How to execute code from an asynchronously loaded script although when it is not loaded completely (Promises)
Sometimes you have to fire an action or execute code before a script is completely loaded in the browser (for example an asynchronously loaded external script). To prevent that these actions resulting in an error or get completely lost, you can use a promise which resolves, when the script is loaded. You can then fire the actions inside the promise and be sure that everything get executed in the correct order when the script is loaded.
Concept Code (copy paste to console)
var x = new Promise(function (resolve, reject) {
setTimeout(resolve, 3000);
});
x.then(function () {
console.log('1');
});
x.then(function () {
console.log('2');
});
x.then(function () {
console.log('3');
});
This should fire: “1,2,3” after 3 seconds when the promise is resolved. That’s the basic concept. Now we bring this to a real world scenario.
Real world example: loadScriptAsync()
We instantiate a new promise and create inside the promise a new script tag. We bind our promise resolver to the onload event, which is fired when the script is completely loaded and then resolve the promise.
The promise is saved in the “scriptLoaded” variable.
<script>
var loadScriptAsync = function(uri){
return new Promise((resolve, reject) => {
var tag = document.createElement('script');
tag.src = uri;
tag.async = true;
tag.onload = () => {
resolve();
};
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
}
var scriptLoaded = loadScriptAsync('external-script.js');
</script>Firing the event via the scriptLoaded promise
Now every time when you want to use methods from the external script you can use the promise like this:
<script>
scriptLoaded.then(function(){
window.extvar.execute('test');
});
</script>Copy & paste script
Try it! Create an index.html and copy this code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title><script>
var loadScriptAsync = function(uri){
return new Promise((resolve, reject) => {
var tag = document.createElement('script');
tag.src = uri;
tag.async = true;
tag.onload = () => {
resolve();
};
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
}
var scriptLoaded = loadScriptAsync('external-script.js');
</script><script>
scriptLoaded.then(function(){
window.extvar.execute('test');
});
</script></head>
<body>
</body>
</html>
Example external script: external-script.js
Use this as an external script, if you don’t have already one.
window.extvar = {};
window.extvar.execute = function(a){ console.log('external event: ' + a); }
console.log('external script loaded');Of course that script does not handle errors or reject the promise when the script is not loaded etc... I just want to make the concept clear.
New at Promises?
Have a look in this nice introduction:
More about the basic principles behind promises you can find here:
https://github.com/mattdesl/promise-cookbook#the-problem
Happy async coding!
