JavaScript For loop inusual behaviour

Question

I have a jsp file with html content, and a script inside and I am also using dhtmlx. The other parts of my Web Application are working, so with this, I want only to focus on this problem because the environment works well. In one point of the file I have got:

numTabs = getNumTabs();
for (var i=0; i<numTabs;i++) {
    var mytab = "tab_"+i;
    tabbar.addTab(mytab,'Tab Numer: ' + i,'');
    //alert("for " + i); PLACE 1
    initTabContent(mytab);
}

function initTabContent(tabID){
    //alert("initTabContent " + i); PLACE 2
    tab = tabbar.cells(tabID);
    toolbar = tab.attachToolbar();
    toolbar.loadXML('.../...file.xml',function(){
           //alert(i); PLACE 3
           toolbar.setItemText('botton1', 'Botton 1');

    });
    grid = tab.attachGrid();
    //more stuff
}

The point is:

If I uncomment the alert in PLACE 1, everything goes pretty well, it loads the XML and everything is working but if I comment the alert it doesn't go well.

If I uncomment alert 1 and alert 2, I will see in the web page:

1. I see: "for 0" -> OK
2. I see: "for 1" that changes almost immediately to "initTabContent 0" -> OK but I can see it
3. I see: "for 1" -> OK
4. I see: "for 2" that changes almost immediately to "initTabContent 1" -> OK
5. I see: "for 2" -> OK
6. I see: "for 3" that changes almost immediately to "initTabContent 2" -> OK ....and on

So, I understand that despite of myfunction the loop goes on and doesn't wait the complete termination of that function. The funny part is that if I comment alert 1 and 2, and uncomment alert 3, the first thing I see on the web page is 4, then 3, 2, 1, 0...

And if I leave again, only alert 1 uncommented, everything goes ok. The reason about that I suppose is that the alert makes the system wait to the user and therefore the XML is well loaded.

My questions: First: Why the loop is not waiting for the function to finish? It should be sequential right? Second: How can I solve it without the alert? I also tried to put an empty for loop inside to make time but it didn't work out...(and that is not a good way to do it)

Thank you very much, Alex.

Answer 1

Thanks to @KevinB I realized that indeed the toolbar declaration was missing in the whole jsp file. The toolbar = tab.attachToolbar(); is overriden before the loading of the XML.

Now with **var** toolbar = tab.attachToolbar(); the problem is solved.

To see the reason that the loop doesn't behave properly, you can read the comments under the question.

Answer 2

Part of what is causing you trouble is that an 'alert' blocks execution, while the loadXML call is asynchronous. To get a more accurate depiction of what is happening in what order, use console.log instead of alert.

Are you trying to use the value of i in your call myFunction for some purpose other than alerts ?

If that is the case. Try replacing:

myfunction(i);

With:

(function (num) { return function() {myfunction(num)} })(i);