0

Chrome 18.0.1025.162m Struts 1.x

这是我使用 js/mootools 创建的 div 的基本结构：

<div class="track">
 <table>
  <tr>
   <td style="white-space:nowrap; width:1%;">
   <td style="white-space:nowrap; width:1%;">
   <td>
  </tr>
 </table>
 <div>
  <table>
   <tr>
    <td style="width:50%;">
     <fieldset style="height: 244px; ">
      <legend></legend>
       <table>
        <tr>
         <td>
          <img>
         </td>
         <td>
          <table>
           <tr>
            <td class="label"></td>
            <td class="comparable"></td>
           </tr>
           <tr>
            <td class="label"></td>
            <td class="comparable"></td>
           </tr>
           ... 8 more of same
          </table>
         </td>
        </tr>
       </table>
       <table>
        <tr>
         <td style="text-align: center; ">
          <button type="button"></button>
         </td>
        </tr>
       </table>
      </fieldset>
     </td>
     <td>
     ...essentially same as prior td
     </td>
    </tr>
   </table>
 </div>
</div>

相关的CSS：

div.track {
 outline:solid thin;
 margin-bottom:10px;
 background-color:#DCEDEA;    
}

td.label {
 text-align:right; 
 white-space:nowrap;
}

'comparable' 只是一个标志，所以我可以在以后找到并可能重新设计它们。

这些结构是在 onreadystatechange 函数中从单个 JSON 响应创建的。其中有 100 多个正在创建，但在它们都准备好然后它们都同时出现之前我什么都看不到。我希望（并且更希望用户看到进度）每个 div 在准备好并添加（使用 mootools Element.inject）到 DOM 后立即显示。如果我逐步使用 Chrome 的开发工具，我会在注入后立即看到 div 的预期行为。

我对 Web 开发还很陌生，所以如果你觉得有必要批评我的方法，我愿意倾听你的想法，但我真的很想对我所看到的行为做出解释。

谢谢。

编辑

页面html的基本思想：

<body>
 <div id='foo'></ div>
</body>

js的基本思想（onreadystatechange之内）：

var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
   getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}
4

1 回答 1

0

我怀疑 DIV一次显示一个，但它们都显示得如此之快，以至于它看起来像是一次发生的。添加console.log(i);到该 for 循环并在 DIV 加载时观察您的控制台。您可以使用 Google Chrome 使用 Ctrl+Shift+J 调出控制台，或者在 Firefox 下安装 Firebug 扩展。

编辑：

在这种情况下，我猜它与浏览器中的显示循环有关。可能类似于（在非常粗略的伪代码中）：

while (1) {
    executeJavascript(); // blocks until all javascript is executed, including your loop
    displayPage();
}

因此，您可能会发现此讨论很有用：如何在我的脚本进行繁重处理时强制浏览器重绘？

于 2012-05-02T00:32:27.740 回答