在退格期间使用 jquery 过滤器延迟进行文本搜索

Question

我正在使用 jquery 过滤器在一个大的名字列表中搜索名字。当我在输入字段中输入时，它工作得很好，速度很快。但是当我按下退格按钮清除搜索文本时，当剩下大约 2 或 3 个字符时，会有超过 4 秒的延迟。

我做了一个demo来解释我的问题

<input type="text" class="search">
<div class="list"></div>
<script>
        // Get the list div
        let $list = $('.list');
        
        // Form a list of numbers from 1 to 8000
        let listHtml = ''
        for (let i = 0; i < 8000; i++) {
            listHtml += `<div class="list_item"><div class="list_item_value c${i}">${i}</div></div>`;
        }

        $list.html(listHtml);

        // Get all the list items
        $listItem = $list.find('.list_item');


        $('.search').on('keyup', function(e) {
            // Get the search text
            let text = $(this).val();
            $listItem.filter(function() {
                $(this).toggle($(this).find(`.list_item_value`).text().includes(text));
            });
        });
</script>

我通过用数字搜索替换文本搜索来简化我在这个演示中遇到的问题。

解决此问题的一种方法是在按下退格键时取消正在进行的 jquery 过滤过程。但我不知道该怎么做。请有人帮我解决它。

Answer 1

考虑以下示例。

$(function() {
  function makeItems(n, t) {
    for (var i = 1; i < n; i++) {
      $(t).append("<div class='list_item'><div class='list_item_value " + i + "'>" + i + "</div>");
    }
  }
  
  var $list = $('.list');
  
  makeItems(8000, $list);

  $('.search').keyup(function(e) {
    var text = $(this).val().toLowerCase();
    $(".filtered").removeClass("filtered");
    var search = (text.length > 0);
    if (search) {
      $(".list_item", $list).filter(function(index) {
        return $(this).text().indexOf(text) === -1;
      }).addClass("filtered");
    }
  });
});

.filtered {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="search">
<div class="list"></div>

与您的代码没有太大区别。一些代码减少。搜索完成后，有一个条件可以确保它不会在空值上完成。我们也每次都重置视图。 Show、Hide 和 Toggle 具有缓动和回调，因此它们有时会变慢。 Add/Remove class 很快。

https://ryanpeden.com/javascript-indexof-vs-includes-performance/

So while includes will be a tiny, tiny amount slower because it has to check if you passed it a regex, in reality this will make no difference to how fast your code runs. You should use indexOf if you care about where the substring is in the original string. If you don’t care, just call includes because it makes the intent of your code more clear.

最后，如果您想使用 includes 或 indexOf 进行比较，由您决定。

在退格期间使用 jquery 过滤器延迟进行文本搜索

text search using jquery filter delay during backspace

javascript

jquery

jquery-ui