滚动过程中的jQuery性能问题

Question

所以我正在使用jQuery步骤，并且在第一步，如果我的表有100个以上的桌子，我要生成checboxes，每行的输入和下拉downs，则整页很慢，并且不可能滚动（我必须等待10秒才能向下滚动，我的RAM和CPU上升）。

是否有一些脚本可以"优化滚动器"，或者我应该在此问题上做什么。

我代码的一部分看起来像：

<script src="/js/jquerysteps/jquery.steps.js"></script>
<script src="/js/jquerysteps/jquery.steps.min.js"></script>
<section>
<table id="data-table-selection" class="table table-striped">
  <thead>
  <tr class="table-bcg" id="table-header">
    <th class="td-100"><?= __('Assign?') ?></th>
    <th class="td-100"><?= __('Quantity') ?></th>
    <th><?= __('Product') ?></th>
    <th><?= __('Container action') ?></th>
    <th><?= __('Removal interval') ?></th>
  </tr>
  </thead>
  <tbody>
  <?php
  $i = 0;
  foreach ($products as $product):
    $i++
    ?>
    <tr>
      <td>
        <label class="checkbox big">
          <input type="checkbox" id="assigned_<?= $i ?>">
          <i class="input-helper"></i>
        </label>
      </td>
      <td>
        <?php
        echo $this->Form->input('item_[]', ['id' => 'product_' . $i, 'label' => false, 'class' => 'form-control kolicina', 'value' => '1']);
      </td>
      <td><?= $product['name'] ?></td>
      <td><?= $this->Form->input('task[]', ['label' => false, 'options' => $taskAction, 'default' => '1', 'id' => 'task_' . $i, 'class' => 'form-control select']); ?></td>
      <td><?= $this->Form->input( 'changeAction[]', [
          'label' => false,
          'options' => $removalAction,
          'default' => $selected,
          'id' => 'changeAction_' . $i,
          'class' => 'form-control select'
        ]);
        ?>
      </td>
    </tr>
  <?php endforeach; ?>
  </tbody>
</table>
</section>
<section>...</section>

JS代码

$(document).ready(function () {
      $("#myTable").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true,
        onFinished: function (event, currentIndex) {
          email_cc = ', ' + $('#cc_email_order').val();
          swal({
           ...
          });
        },
        labels: {
          finish: textFinish,
          next: textNext,
          previous: textPrevious,
          loading: textPleaseWait
        },
        onStepChanging: function (event, currentIndex, newIndex) {
          if (currentIndex == 0) {
            var ordered_by = $('#ordered_by').val();
            var ordered_by_email = $('#ordered_by_email').val();
            var telephone = $('#telephone').val();
            var email_cc = $('#cc_email_order').val();
             ....validation...
              $(document).ready(function () {
                $('#destination_numbers_preview').empty().append($('#destination_numbers option:selected').text());

...附加其他元素....

              });
              return true;
            }
            return false;
          }
          if (currentIndex > newIndex) {
            return true;
          }
        }
      });

如果我禁用jQuery steps，一切都可以。因此，当有100多个产品的桌子时，除了某种程度上，jQuery步骤以某种方式出现问题，根本没有滚动事件。

Answer 1

听起来您需要加载更少的行才能从页面上的大量数据开始。当您到达页面底部时，也许您可以加载更多。当您使用jQuery时，您可以尝试：

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()){
       //load more rows in
    }
 });

也许您还需要在顶部卸下东西。当用户滚动到顶部时，您需要一个类似的功能才能加载所拥有的功能。

另一个更简单的替代方案是分页结果，将1-10放在一个表上，然后在另一个选项卡上2-20加载新请求，依此类推，依此类推，依此类推。>