How to use the progress bar of google closure tools effectively?

I would like to show the progress bar using google closure library during heavy calculation in JavaScript. A sample code is below.

// An essential code which is not working well
var pb = new goog.ui.ProgressBar;

for (i = 0; i < 100; i += 1) {
   // Some costly process here
   pb.setValue(i);
};
开发者_StackOverflow中文版

I know JavaScript is fully single thread model. So a snippet above is not working as I expected. Does anyone know an effective approach to use the closure progress bar in this case?

Thanks in advance.

The most common approach is to break down your costly process into small chunks, and update your progress bar on each iteration. That is unless you want to consider using web workers, but these are only supported in a few modern browsers.

On a separate note, don't forget to declare the i variable, because otherwise it will become an implied global variable.