Stop midway through a function to load scripts

Question

Here is my JS File:

function loadScripts(){
    var scripts = ['a.js', 'b.js', 'c.js'];
        for (i=0; i<scripts.length; i++){
            var script = document.createElement('script');
            script.src = scripts[i];
            head.insertBefore(script, head.firstChild);
    }
};

function Formatter(){

    setTimeout(function(){loadScripts()},1000);

    this.instantiate = function(){
        return this;
    };

    this.func1 = function(){
        ...
    };

    this.func2 = function(){
        ...
    };

};

func2 uses a variable that is inside the scripts to be loaded and it is throwing an error saying the variable is not defined. I am unable to stop the processing to get the scripts loaded. How do I do it? The function Formatter() is invoked from JSPs and then instantiate() method is called.

Why not call `loadScripts` from inside `instantiate`? Or even remove the timeout entirely. Why is the timeout there? — CodingIntrigue, May 08 '14 at 07:21
Check in dev-tools so that the scripts are actually loaded correctly. — Jite, May 08 '14 at 07:27
Did you consider using some sort of loader library like require.js? See http://stackoverflow.com/questions/13225245/require-js-synchronous for a similar problem. If you don't want to use that, you'll have to use [synchronous XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Synchronous_request) to load your scripts. Anyway, synchronous loading is not recommended. — user123444555621, May 13 '14 at 06:33
@Pumbaa80 I know synchronous loading is not recommended, but in this case I need it. I did come across the option of require.js, but wanted to keep it simple as it was a one time small change. — Chiranjib, May 13 '14 at 06:36

Chiranjib · Accepted Answer · 2014-05-13T06:21:35.557

Implemented this:

function loadScripts(scripts)
{
    var isXDR = window.XDomainRequest;
    for (i=0; i < scripts.length; i++)
    {
        var xhrObj = new XMLHttpRequest(),
            vURL = scripts[i];
        xhrObj.open('GET', vURL, false);
        xhrObj.send('');
        var se = document.createElement('script');
        se.type = "text/javascript";
        se.text = xhrObj.responseText;
        head.insertBefore(se, head.firstChild);
    }
};

function Formatter()
{
    var scripts = ["a.js", "b.js"];
loadScripts(scripts);

...
};

score 0 · Answer 2 · answered May 08 '14 at 07:28

Here is my JavaScript loader

var meorg = new Object();


var urls = new Array(
   'files',
   'calendar',
   'scheduler',
   'alert',
   'private',
   'main'
);


meorg.path = '/themes/meorg2/js/meorg.'

meorg.loadScript = function (urls) {
 if (urls.length === 0) return false;
 var _self = this;
 var url = urls.shift();

 var body = document.getElementsByTagName('body')[0];
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = this.path + url + '.js';

 script.onload = function () {
    _self.loadScript(urls);
 };
 body.appendChild(script);
 }
meorg.loadScript(urls);

Take it as an example.

All your methods and plug-ins are in scripts e.g files.js and you should call methods from main.js — Alexey Dmitriev, May 08 '14 at 07:30

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

If I am getting you right, you want to halt the execution of a function until another completes. Try this

Wait till a Function with animations is finished until running another Function

edited May 23 '17 at 10:26

Community

1
1

answered May 08 '14 at 07:32

anirban

674
1
7
21

No, after I add the script tags, I have to wait for them to be loaded. Something along the lines of onreadystatechange or onload – Chiranjib May 08 '14 at 07:35

Stop midway through a function to load scripts

3 Answers3