Question

我想基于输入框模糊事件创建行。因此，我尝试使用jquery进行for循环以将表中的行追加到表中，但是当循环值超过10000时，它将花费更多时间或一段时间页面无法响应。

$("#place_count").blur(function () {
    var row_count = 1;
    if ($(this).val() > 1) {
        row_count = parseInt($(this).val());
    }
    var intial_count = $('#route_places_table tr').length;

    for (var i = (intial_count + 1); i <= row_count; i++) {
        $('#route_places_table tbody').append('<tr><td>' + i + '</td><td> 
            < input type = "text" class= "place_input" name = "places[]" ></td >
            <td>
                <span class="add_row_below row_icons">
                    <i class="fa fa- plus" aria-hidden="true"></i>
                </span> <span class="move_row_up row_icons">
                    <i class="fa fa-arrow-up"></i> </span>
                <span class="move_row_down row_icons">
                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                </span><span class="close_row row_icons">
                    <i class="fa fa-window-close" aria-hidden="true"></i></span>
            </td></tr >'
        );
    }
});

那么如何减少延迟时间呢？或者我的代码有任何问题，请帮助我改进代码。

Answer 1

您可以尝试在循环结束后仅附加一次，但是我强烈建议限制附加到页面的行数，通常不需要那么多的dom节点即可使页面变慢，建议您使用分页之王

var html ='';
for(var i=(intial_count+1);i<=row_count;i++){
    html+= '<tr><td>'+i+'</td><td> 
            <input type="text" class="place_input" name="places[]"></td> 
            <td>
             <span class="add_row_below row_icons">
                 <i class="fa fa- plus" aria-hidden="true"></i>
             </span> <span class="move_row_up row_icons">
               <i class="fa fa-arrow-up"></i> </span>
             <span class="move_row_down row_icons">
              <i class="fa fa-arrow-down" aria-hidden="true"></i>
             </span><span class="close_row row_icons">
              <i class="fa fa-window-close" aria-hidden="true"></i></span> 
              </td></tr>';     
}
$('#route_places_table tbody').append(html);

Answer 2

不是一次一行地附加每一行，而是一次附加整个模板。这样可以减少时间。

var rows = [];
for (var i = (intial_count + 1); i <= row_count; i++) {
    rows.push('<tr><td>'+i+'</td><td> 
        <input type="text" class="place_input" name="places[]"></td> 
        <td>
         <span class="add_row_below row_icons">
             <i class="fa fa- plus" aria-hidden="true"></i>
         </span> <span class="move_row_up row_icons">
           <i class="fa fa-arrow-up"></i> </span>
         <span class="move_row_down row_icons">
          <i class="fa fa-arrow-down" aria-hidden="true"></i>
         </span><span class="close_row row_icons">
          <i class="fa fa-window-close" aria-hidden="true"></i></span> 
          </td></tr>');     
}

$('#route_places_table tbody').append(rows.join(''));

如何使用JavaScript循环在表中添加行时减少延迟

2 个答案: