Question

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;
}

'可比'只是一个标志，所以我可以找到并可能在以后重新安排它们。

这些结构是在单个JSON响应的onreadystatechange函数中创建的。其中100多个正在创建，但我没有看到任何东西，直到它们都准备就绪，然后它们全部出现。我希望（并且更喜欢用户看到进度）每个div一旦准备就会显示并添加（使用mootools Element.inject）到DOM。如果我逐步使用Chrome的开发工具，我会看到在注入后立即显示div的预期行为。

我对网络开发还很陌生，所以如果你觉得有必要批评我的方法，我会听到你的想法，但我真的很想解释我所看到的行为。

感谢。

修改的

页面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
}

Answer 1

我怀疑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(); }

因此，您可能会发现此讨论很有用：How can I force the browser to redraw while my script is doing some heavy processing?

div创建（javascript / mootools）来自ajax响应，直到整个响应处理完毕才显示

1 个答案: