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

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

HTML

  
 
foo
 
bar
 ....  

javasrcript

  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？

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

实时预览

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