如何在javascript/jquery中更新for循环的每次迭代显示的html？

Question

如何在循环的每次迭代中更改h1？此代码现在只在完成所有操作后显示h1文本.

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

附加信息:如果我循环调整窗口大小,html更新.

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/

Answer 2

有时您可以通过强制重新计算布局来强制渲染

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

它可能不适用于所有浏览器。

更好的方法是不会过多阻塞浏览器：

function doThings(array) {
   var queueWork,
       i = -1,
       work = function () {
          // do work for array[i]
          // ...
          queueWork();
       };

   queueWork = function () {
       if (++i < array.length) {
          $("body > h1").text("Processing #" + i);
          setTimeout(work, 0); // yield to browser
       }
   };
}


doThings(yourArray);