Question

我有一个javascript函数，可以从xmlhttprequest函数加载100个div。我希望它能让浏览器逐个显示它们，因此用户可以看到进度。但是使用下面的功能，除非所有内容都已加载，否则如何在每个子div附加后让浏览器“重绘”页面？

  window.onLoad = function () 
    {
    var i;
    for (i=1;i<=100;i++)
    {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = httpget('getitem.pl?component=' + i);
      var maindiv = document.getElementById('maindiv');
      maindiv.appendChild(newdiv);
      document.getElementById('progressdiv').innerHTML = 'Progress: ' + i + ' of 100';
      }
    document.getElementById('progressdiv').innerHTML = 'Loaded.';
    }

Answer 1

你不能在一个功能中做到这一点。您需要让浏览器呼吸，通常使用setTimeout(fn, 0)。

window.onload = function() {
  var i = 1;
  function loop() {

    // loop body

    if (++i <= 100) {
      setTimeout(loop, 0);
    } else {
      // loop done
    }
  }
  loop();
}

Javascript和浏览器的UI在同一个线程中运行;只要你继续执行JS，UI就不会更新。 setTimeout将在队列中推送新的“作业”，然后loop函数将退出。这结束了当前的“工作”。队列中的下一个将是UI中的任何更改;完成后，下一个loop“工作”将开始。

javascript在功能中重绘页面？

1 个答案: