Why is there a time lag for document.write of script tag ? And why is the script tag execution delayed?

Question

In my code, I created 5 iframes with script tag in them to get responses from server. we need to do this in parallel. Also because of the cross-domain issues, we did not choose Ajax tech, just creating iframes at the same time to make asynchronous requests.

<script type="text/javascript" href="http://www.example1.com/json.js"></script> 
<!-- //---------------------------------------------------------------------(1)-->
<script type="text/javascript">
    var url = "http://www.example2.com/getResponse/";
    var count = 5;
    var callback = "callback";

    function iframeCallback(index) {
        var iframe = document.createElement('iframe');
        iframe.style.border='0px';
        iframe.style.width ='0px';
        iframe.style.height='0px';
        document.body.appendChild(iframe);
        var content = "<script type='text/javascript'>";
        content += "var begin = new Date();";           //------------------(2)
        content += "var jsText = \"<script type='text/javascript' src='" + url + "'></\" + \"script>\";";
        content += "document.write(jsText);";
        content += "</"+"script>";
        content += "<script type='text/javascript'>";
        content += "var data = eval('"+callback+"');";  //------------------(3)
        content += "window.parent.getRepsonse(data);";
        content += "</"+"script>";
    }

    function getRepsonse(data) {
        //Deal with the responses here
        //------------------------------------------------------------------(4)
    }

    function doMainProcess() {
        for (i=0; i<count; i++) {
            iframeCallback(i);
        }

        //pause the main thread here to wait until calls are finished
        //------------------------------------------------------------------(5)
        //go on to do something else
    }
</script>

My Questions are here:

1. Why is there a time lag for document.write of script tag?

   When I debug the code above, I found that there is a time lag between (1) and (2). Is there any way to make the two happened at the same time? Or reduce the delay as short as possible.

2. Why is the script tag execution delayed?

   The time delay between (2) and (3) is also strange. When we try to go directly to URL for the call, it takes only 150ms, but if we use script tag to make the call, it takes 400ms+. Need to get the call timing as close to direct call as possible.

3. How can we pause load of rest of page until we get responses from iframes?

For some reason, we can't simply use "setTimeout" function to create a time delay at (5).

I tried to set a flag at (4) when the last call responds, and then use while-loop at (5) to pause load of page there. but seems to have no effect. If so, the calls in iframes will also be blocked until while-loop is finished.

Is there a good way to pause the main thread at (5) to wait until all calls are finished?

Answer 1

1. You can not control when a browser renders DOMElements or loads resources, you can only react upon them.

2. If there is a delay, why not write a synchronize function that waits for all asynchronous process to finish (like gathering data)?

3. You can't pause it, you just have to not render it or render it but hide it.

What I am most worried about is that you're thinking of building a high traffic service on a technology that you don't seem to grasp. You're trying to do timing in a language that doesn't support timing.

Also, there is an error in your script, content is not actually getting written.

And eval is evil. There has to be a better way.