JQuery表过滤器工作太慢

JQuery table filter is working too slow

本文关键字：工作 过滤器 JQuery      更新时间：2023-09-26

我正在尝试制作一个列表过滤器，它在小列表上工作得很好，但问题发生在大列表上，它变得非常慢。如果点击重置按钮或如果一些字符被删除，新的列表显示如此缓慢。这样做可能会有一些问题，请帮助我。以下是我的代码:HTML: 

<div class="filter-wrap">
  <span class="clearable">
    <input class="data_field" name="data_field" id="brands-search" placeholder="Search Brands Here" type="text"/>
    <span class="icon_clear" style="cursor:pointer;">✘</span>
  </span>
  <div class="small-bt"><p class="common all">select all &nbsp|</p><p class="common none">&nbspunselect all</p></div>
  <div class="check-wrap" id="brands">
    <div class="check-unit">
      <input type="checkbox" class="check" />
      <p class="slide-head brandList">Samsung</p>
  </div>
  </div>
</div>
JQuery: 

$('.check-unit:nth-child(even)').css({'float':'right'});
function listFilter(list){
        $('.data_field').change( function () {
            var filter = $(this).val();
            if(filter) {
                $(list).children("p:not(:Contains(" + filter + "))").parent().slideUp();
                $(list).children("p:Contains(" + filter + ")").parent().slideDown();
                //console.log($(".a:nth-child(1)").text());
              } else {
                $(list).children("p").parent().slideDown().removeClass("a");
              }
          })
        .keyup( function () {
            $(this).change();
        });
}

这里的check-unit是重复的。有关详细信息，请参阅本网站http://jsfiddle.net/iiison/BdRpk/

还有一件事:为了使布局正确，我使用了$('.check-unit:nth-child(even)').css({'float':'right'}); (javascript的第一行)。如果你在输入框中输入一些东西，布局受到干扰，请告诉我这个问题的解决方案。

我认为性能下降的大数据量，因为你使用的是slideUp()/slideDown()。你为什么不用hide()代替呢?

下面是一个代码，从一个div中的联系人列表中创建一个过滤器/搜索功能。联系人作为子div输入到另一个div

function searchContacts(entered_text){
    entered_text = entered_text.toUpperCase();//convert the filter value to uppercase to make it non case sensitive
    $("#external-events").children().show(); //Refresh the div containing the contact list. Id of the parent div is "external-events"
    var contactDivs = $("#external-events").children();
    for (var iter=0;iter<contactDivs.length ; iter++)
    {
        contactDivs[iter].firstChild.value = contactDivs[iter].firstChild.value.toUpperCase();
        if(contactDivs[iter].firstChild.value.indexOf(entered_text)== -1) {             // Does not contain
            $(contactDivs[iter]).hide();
        }
    }
}

这将隐藏其他符合条件的元素，从而过滤掉实际符合条件的元素。

尝试提高代码的性能，如果可以在纯JS中做到，就不要使用jQuery，在类选择器之前，尝试应用元素，这将提高性能:

$('div.check-unit:even').css({'float':'right'});
// Why are you define evt handler in a function, and how many times do you call this function ? This could conduct to a huge memory use.
function listFilter(list){
    $('.data_field').keyup( function () {
        var filter = this.value;
        if(filter) {
            //Unoptimized code... Can you provide a fiddle to speed up the debug ?
            $(list).children("p:not(:Contains(" + filter + "))").parent().slideUp();
            $(list).children("p:Contains(" + filter + ")").parent().slideDown();
            //console.log($(".a:nth-child(1)").text());
          } else {
            $(list).children("p").parent().slideDown().removeClass("a");
          }
           //END of Unoptimized code...
      });
}
相关文章：