javascript - 如何中断输入的 javascript 操作并开始新操作

Question

我制作了一张表格，但我正在使用 <div> s 而不是 <tr> s 和 <td>秒。这是一个例子:

<div class="tbl tbl1">
    <div class="thead">
        <div class="tr">
            <div class="td colTitle" style="width: 120px"><span>Title</span></div>
            <div class="td colLink" style="width: 190px"><span>Link</span></div>
            <div class="td colSize numeric" style="width: 75px"><span>Size(MB)</span></div>
            <div class="td colUploadDate" style="width: 75px"><span>UploadDate</span></div>
            <div class="td colOpen" style="width: 50px; max-width: 50px;"><span>Show</span></div>
        </div>
        <div class="tr">
            <div class="td colTitle">
                <input type="text" class="Filter" />
            </div>
            <div class="td colLink">
                <input type="text" class="Filter" />
            </div>
            <div class="td colSize">
                <input type="text" class="Filter" />
            </div>
            <div class="td colUploadDate">
                <input type="text" class="Filter" />
            </div>
            <div class="td colOpen">
            </div>
        </div>
    </div>
    <div class="tbody">
    </div>
</div>

我会填写tbody与服务器端操作的一部分。

我使用以下代码根据过滤器输入中输入的值过滤我的行。

$(".Filter").on('input', function () {
      filterGrid();
      $(".rowCount").val($(".tbody .tr:visible").length);
});
function filterGrid() {
    $('.tbody .tr').each(function () {
        var v = 1;
        var x = $(this);
        $(".thead .Filter[value!='']").each(function () {
            var i = $(this).parent(".td").index();
            if (x.children(".td:eq(" + i + ")").html().indexOf($(this).val()) == -1) {
                v = 0;
                x.hide();
                return false;
            }
        });
        if (v == 1) {
            x.show();
        }
    });
}

当我有几个行数时，我的代码工作正常，但是当加载的行数增加时，执行过滤操作需要更多时间。

当我输入第一个字母时，我无法输入第二个字母，直到基于第一个字母的过滤结束。我可以强制 javascript 中断操作并在我键入时启动一个新操作吗？

下面是我的表格示例

Answer 1

您有相当多的 jQuery 操作，当它们放在许多行上时，可能会花费相当多的时间。与其构建大量 jQuery 集合(这有一些开销)并在每次迭代中重新计算您要查找的索引，不如考虑使用轻量级得多的 vanilla Javascript。您还可以预先创建一个过滤器值数组及其关联索引，这样您就不必在每次迭代时都浏览 DOM 来查找它们:

$(".Filter").on('input', function() {
  $(".rowCount").val(filterGrid());
});

function filterGrid() {
  const values = Array.from(
    document.querySelectorAll('.thead .Filter'),
    elm => elm.value
  );
  
  let rowsShown = 0;
  document.querySelectorAll('.tbody .tr').forEach((tr) => {
    const tds = tr.querySelectorAll('.td');
    const noMatch = values.some((value, i) => {
      if (!value) {
        return;
      }
      const td = tds[i];
      return !td.innerHTML.includes(value);
    });
    if (noMatch) {
      tr.style.display = 'none';
    } else {
      tr.style.display = 'block';
      rowsShown++;
    }
  });
  return rowsShown;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

RowCount: <span class="rowCount">1</span>

<div class="tbl tbl1">
  <div class="thead">
    <div class="tr">
      <div class="td colTitle" style="width: 120px"><span>Title</span></div>
      <div class="td colLink" style="width: 190px"><span>Link</span></div>
      <div class="td colSize numeric" style="width: 75px"><span>Size(MB)</span></div>
      <div class="td colUploadDate" style="width: 75px"><span>UploadDate</span></div>
      <div class="td colOpen" style="width: 50px; max-width: 50px;"><span>Show</span></div>
    </div>
    <div class="tr">
      <div class="td colTitle">
        <input type="text" class="Filter" />
      </div>
      <div class="td colLink">
        <input type="text" class="Filter" />
      </div>
      <div class="td colSize">
        <input type="text" class="Filter" />
      </div>
      <div class="td colUploadDate">
        <input type="text" class="Filter" />
      </div>
      <div class="td colOpen">
      </div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr" idattachment="1">
      <div class="td colTitle" style="width: 120px;">FirstFile</div>
      <div class="td colLink" style="width: 190px;">uf1_1.png</div>
      <div class="td colSize" style="width: 75px;">0.11</div>
      <div class="td colUploadDate" style="width: 75px;">1397/12/13</div>
      <div class="td colOpen" style="width: 50px;"><a class="link" href="uploads/uf1_1.png">Open</a></div>
    </div>
  </div>
</div>

如果这还不够快，您可以使用 for 循环代替数组方法，这会使事情变得更快(尽管更难阅读)。

如果您在 .tbody 中有大量行，而这仍然不够快，那么您可以考虑向 添加一个去抖动器input 监听器，这样 filterGrid 只会在输入最后一个字符后 200 毫秒后调用，这样大操作只会在您至少有一个 bit 确信刚刚输入的字符可能是用户最后想输入的字符(而不是在输入每个字符后运行 filterGrid):

let filterTimeout;
$(".Filter").on('input', function() {
  clearTimeout(filterTimeout);
  filterTimeout = setTimeout(() => {
    $(".rowCount").val(filterGrid());
  }, 200);
});