Question

因此，在使用AJAX调用向表中动态添加数千行之后，最后，我想通过整个表并用人类可读的格式替换日期数据。仅供参考，该调用每秒增加50行（API限制）。

    var t = document.getElementById('theTable');
    for(var i=1;i<t.rows.length;i++) {
      dateOld = $("tr:nth-child("+i+") td:nth-child(3)").text();
      myDate = new Date( dateOld *1000);
      $("tr:nth-child("+i+") td:nth-child(3)").text(myDate.toLocaleString());
      dateOld2 = $("tr:nth-child("+i+") td:nth-child(4)").text();
      myDate = new Date( dateOld2 *1000);
      $("tr:nth-child("+i+") td:nth-child(4)").text(myDate.toLocaleString());
    }

当我填充表格后运行此脚本时，在1000行以下需要几秒钟，但一旦超过5000行，它只需要很长时间，甚至更糟，15000，它只是在尝试崩溃后崩溃做几分钟。

有关如何更快地运行此脚本的任何提示？

另外，我已经在for循环中使用了它，用于逐行替换它

  success: function (apiResponse){
   for(var item in apiResponse.response.sessions){
     var row = $('<tr>');
     $('#theTable tr:first th').each(function(){
      var td = "<td>" + apiResponse.response.sessions[item][$(this).text()] + "</td>";
      row.append(td);
     });
     $(row[0].outerHTML).appendTo("#theTable");
     dateOld = $("tr:last-child td:nth-child(3)").text();
     myDate = new Date( dateOld *1000);
     $("tr:last-child td:nth-child(3)").text(myDate.toLocaleString());
     dateOld2 = $("tr:last-child td:nth-child(4)").text();
     myDate2 = new Date( dateOld2 *1000);
     $("tr:last-child td:nth-child(4)").text(myDate2.toLocaleString());
   }

最后批量做这一切都是一个糟糕的决定，所以我决定提供旧代码，一旦添加它就会逐行执行。但是，一旦表格达到3000行，向表中添加新行就会变得非常慢，因为这些代码保留在＆＃34; for＆＃34;循环。

也许这两个有更好的解决方案？另一个问题 - 它是否有助于隐藏桌子，直到它准备就绪？只是显示：桌子上没有？没有不同？感谢

Answer 1

我认为你应该在生成html文本之前格式化源数据，因为操作dom的性能很差。并使用如下数组加入字符串：

var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];

for (var i = 0,
l = arr.length; i < l; i++) {
    list[list.length] = '' + arr[i] + '';
}
list = '' + list.join('') + '';

在这种情况下，性能将得到改善。最后但并非最不重要的一点是，当您有数千行时，分页是一个不错的选择，因为浏览器需要时间来渲染，这是糟糕的表现！

Answer 2

最好在飞行中转换日期。您可以在成功处理程序中执行此操作。

  success: function (apiResponse){
   for(var item in apiResponse.response.sessions){
     var row = $('<tr />');
     $('#theTable tr:first th').each(function(ind){//ind will be in use
       var val = apiResponse.response.sessions[item][$(this).text()];
       row.append($("<td />").html(function(){
                     if(ind == 2 || ind == 3){//nth-child(3) and (4)
                        return (new Date(val * 1000)).toLocaleString();
                     }
                     else
                       return val;
                  })); 
     });
     row.appendTo('#theTable');
     }//for(item
     /* no need any more
     $(row[0].outerHTML).appendTo("#theTable");
     dateOld = $("tr:last-child td:nth-child(3)").text();
     myDate = new Date( dateOld *1000);
     $("tr:last-child td:nth-child(3)").text(myDate.toLocaleString());
     dateOld2 = $("tr:last-child td:nth-child(4)").text();
     myDate2 = new Date( dateOld2 *1000);
     $("tr:last-child td:nth-child(4)").text(myDate2.toLocaleString());
     */
   }//success

在大型动态创建的表中加速for循环文本替换

2 个答案: