Controlling JavaScript Execution Order

Here is my experiment with delaying JavaScript execution order. I have tried various methods I can remember and all failed. So, I have written an efficient script (I think!) for delaying the execution of dependent JavaScript code.
I had three lines of code. First was External JavaScript file. Second was call to a function declared inside the external JavaScript file. Third was the facebook FBML.

Exactly the code was this:

<script type="text/javascript" src="http://sf.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("ef7628b961a34c8c818c1eb8891847af");</script>
<fb:fan profile_id="176350059435" stream="0" connections="10" logobar="0" width="300"></fb:fan><div style="font-size:8px; padding-left:10px"></div>

In Firefox, my code was working but not in Chrome browser.

When I used it the same as above it was working but not when used inside document.write() or when called using iframe and iframe src attribute values pointing to the above code. I tried using defer and others tricks. I read some info here as well but all failed. I tried using the same above code inside IFRAME or using Ajax call but order of execution was not in the same order, the code was presented in DOM. It was happening that FB.init() was called before external JavaScript could be executed. So, error was - FB is not defined. I tried using other tricks like using eval. I thought eval() is not good so it will delay the JavaScript part and by that time external file will get executed. Then I tried using for (i=0;i<1000;i++) {} but this also failed and thought not a good solution to increase time. Then I used window.setTimeout('fb1()', 1000); , and this worked. The setTimeout worked but here it is assumed that external file will be executed by 1000 microsecond. It may execute earlier or it may take longer time. If it execute earlier then why wait for longer time and if it execute in longer time then my code will result in error - FB is not defined. So, I have written a script to check in recursive manner after small internal and terminate after success.

<script type="text/javascript" src="http://sf.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">
var si = window.setInterval('fb1()', 100);
</script>
<script>
function fb1()
{
	if (typeof FB != 'undefined') {
		FB.init("ef7628b961a34c8c818c1eb8891847af");
		window.clearInterval(si);
	}
}
</script>
<fb:fan profile_id="176350059435" stream="0" connections="10" logobar="0" width="300"></fb:fan><div style="font-size:8px; padding-left:10px"></div>
  • # 1 - by Milan

    Unfortunately, it still works in Firefox only :(.

  • # 2 - by Bryan Pieper

    I used a similar method to your example, except I appended the FB JS files to the body node. That way, the loading is delayed. Also, I put in the hidden container for support with IE8.

    You can see the JS at my website:
    http://www.thepiepers.net/

  • # 3 - by Satya Prakash

    @Milan
    Sorry! I should have replied earlier to the comment. It would have helped others as well.
    Actually it is Facebook failing for some reason in IE. but the method used here is useful (I thought), so I shared with others.

Comments are open for an year period. Please, write here on Facebook page.