Question

如果您尝试使用jQuery根据输入值隐藏和显示子级，则会在键入时导致性能问题。为避免在每个字符后调用过滤器函数，请使用debounce的{{1}}方法。

html

lodash

javasrcript

<input id="search" />

<div>
  <div class="child">foo</div>
  <div class="child">bar</div>
  ....
</div>

不要错过导入Lodash和jQuery的机会。

PS：这是此帖子答案的一部分： How to hide the parent div if all its child div are hidden?

Answer 1

我提出了另一种不带破折号的解决方案。只需在页面加载时使用您的元素创建一个地图（假设它们不变，并且在页面加载时仅创建一次）。

$(document).ready(function(){
  var map = {};
  $('.child').each(function(i,el){
    map[$(el).text().toLowerCase()] = $(el);
  });
  $('.child').toggle(false);
  $('#search').on('keyup', function(){
    $('.child').toggle(false);
    var el = map[$(this).val().toLowerCase()];
    if (el)
      $(el).toggle(true);
  });
});

Live preview

Answer 2

$("#search").on("keyup", _.debounce(filterChildren, 300));

function debounce( fn, threshold ) {
    var timeout;
    return function debounced() {
        if ( timeout ) {
            clearTimeout( timeout );
        }
        function delayed() {
            fn();
            timeout = null;
        }
        timeout = setTimeout( delayed, threshold || 100 );
    };
}

如何使用jquery和lodash消除输入的反跳

2 个答案: