How do I update the html displayed for each iteration of a for loop in javascript / jquery?

Question

How would I have the h1 change for each iteration of the loop? This code now only displays the h1 text after everything is done.

for (i=0; i<array.length; i++) {
  $("body > h1").text("Processing #" + i);
  // things that take a while to do
}

Additional info: if I resize the window as it loops, the html updates.

Answer 1

var array = ['one', 'two', 'three']
var i = 0;

var refreshIntervalId = setInterval(function() {
    length = array.length;
    if (i < (array.length +1)) {
        $("h1").text("Processing #" + i);
    } else {
        clearInterval(refreshIntervalId);
    }
    i++     
}, 1000);

http://jsfiddle.net/3fj9E/