javascript - 如何使用 jquery 和 lodash 去抖动输入

Question

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

html

<input id="search" />

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

java脚本

  var filterChildren = function() {
    var value = $(this).val().toLowerCase();
    $(".child").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });    
  };

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

不要错过导入Lodash和jQuery。

PS：这是这篇文章答案的一部分： 如果所有子div都被隐藏，如何隐藏父div？

标签： javascriptjquerylodash

Answer 1

我提出了另一种没有 lodash 的解决方案。只需在页面加载时使用您的元素创建地图（假设它们不会更改并且仅在页面加载时创建一次）。

$(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);
  });
});

实时预览