PDA

View Full Version : Progress Bar Not Working Inside A loop



jeromer
2 Sep 2011, 11:48 AM
The following code does not display the progressbar or the updating of the progress bar. It looks like it is related to the progress update code being in a loop. I have tried it this way and with the Ext.Array.each. Both fail to produce the progress bar display. Anyone ran into this before?

var pgb = Ext.create('Ext.ProgressBar',{ text:'Updating...',
width:200
});




var smenu = Ext.create('Ext.menu.Menu',{
width:200,


plain:true,
float:true,
shadow:true,
//margin: '5 5 5 5',
frame:true,
items:[
pgb
]
});

smenu.show();

var pc;
for (var i = 0;i < numOfNodes; i++) {


pc = i / numOfNodes;

pgb.updateProgress(pc, 'Updating...',false);



this.saveTree(r.childNodes[i],i,r.childNodes);
}

smenu.hide();

skirtle
3 Sep 2011, 3:00 PM
Please don't double post. Other version of this thread here:

http://www.sencha.com/forum/showthread.php?145792

JavaScript is single threaded. Until the current thread yields control it cannot be interrupted. Though you can make changes to the DOM they will not be shown by the browser until the current JavaScript thread finishes execution. Your code will show, update and hide the progress bar without ever yielding control, so the DOM changes to the progress bar will happen but they won't be rendered by the browser until the end.

Strictly speaking, what I've said above isn't quite true. You can interrupt a thread by inserting a JavaScript alert() call. Bizarrely, the yields control back to the browser and allows any other JavaScript code that is waiting to take over. It also allows rendering to catch up. This can often lead to confusion when people use alert() messages for debugging as they effectively make JavaScript multi-threaded and odd bugs can result. In your case, however, adding alert() in a couple of key places in your code will allow you to see confirmation of what I've described above.