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

Question

如果您尝试使用 jQuery 根据输入的值隐藏和显示子项，则会导致键入时出现性能问题。若要避免在每个字符之后调用筛选器函数，请使用lodash的debounce方法。

.html

<input id="search" />
<div>
<div class="child">foo</div>
<div class="child">bar</div>
....
</div>

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