waiting for function execution before running other code

Question

i have a function the loads JS files, one of the JS file is important to the other code to run successfully so i am trying to wait till the function successfully load it.

Till now i have tried several ways- but they didn't work for me, like this one for example:

$(document).ready(function () { function kickOff() { return new Promise(function (resolve, reject) { loadRemoteFile("hconfig.js"); }); } kickoff().then(function (result) { run the code that depends on the code that kickoff() run }); });

LoadRemoteFile function

function loadRemoteFile(filename, loadIntoHeader){ filetype = filename.match(".css") ? "css" : "js"; if (filetype=="js"){ //if filename is a external JavaScript file if(!loadIntoHeader){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = filename; document.body.appendChild(script); }else{ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", filename); document.getElementsByTagName("head")[0].appendChild(fileref); } }else if (filetype=="css"){ if(!loadIntoHeader){ var style = document.createElement("link"); style.type = "text/css"; style.rel = "stylesheet"; style.href = filename; document.body.appendChild(style); }else{ var fileref=document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); document.getElementsByTagName("head")[0].appendChild(fileref); } } }

Is it a good solution? why isn't it working?

You need to resolve the Promise() you create. Only after that happens will then() be executed. To do this you'll most likely need to add a callback to loadRemoteFile() — Rory McCrossan
– Rory McCrossan, Commented Nov 6, 2017 at 14:58
What is loadRemoteFile doing? That is your own implementation... in general you can do something like this: jQuery.getScript("hconfig.js", function() { /* your other code */ }) — xander
– xander, Commented Nov 6, 2017 at 15:02

Rory McCrossan · Accepted Answer · 2017-11-06 15:14:55Z

You'll need to call resolve() on the Promise() you created. Only after that happens will the logic in then() be executed.

To do this I'd suggest you restructure your logic so that loadRemoteFile() itself returns the promise, that way it's in scope to be resolved without needing to pass it around as an argument. Try this:

$(document).ready(function() { function kickOff() { return loadRemoteFile("hconfig.js"); } function loadRemoteFile(filename) { return new Promise(function(resolve, reject) { console.log('loading remote file...'); // your logic here... setTimeout(function() { // pretend this is an AJAX request.... console.log('remote file loaded.'); resolve(); // resolve the promise here to signify all work has been completed }, 2000); }); } kickOff().then(function(result) { console.log('kickoff...'); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Note that you can also call reject() in the Promise handler if there was an error encountered during the remote call.

Alternatively you could change the logic to use a callback pattern. This negates the need for the Promise and your intermediary kickOff() method:

$(document).ready(function() { function loadRemoteFile(filename, cb) { console.log('loading remote file...'); // your logic here... setTimeout(function() { // pretend this is an AJAX request.... console.log('remote file loaded.'); cb && cb(); }, 2000); } loadRemoteFile("hconfig.js", function(result) { console.log('kickoff...'); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

i call the loadRemoteFile function from other places also. will i need to change the call from there also?
and if don't- i don't have to make any change to the other calls?
No, but just make sure they still complete as you expect them to, as they are asynchronous.

Collectives™ on Stack Overflow

waiting for function execution before running other code

1 Answer 1

14 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Related