如何在jQuery键盘上实现延迟？

Question

我正在做一个列表过滤器，希望在用户是快速打字机的情况下有所延迟。为类似的问题寻找不同的解决方案并没有帮助我，我也不理解它们实现的逻辑。

这是我当前的代码：

$.fn.filterList = function(){   
    var inputFilter = $(this);
    var list        = $('#' + inputFilter.data('list'));
    var listItems    = list.children('li');

    inputFilter.keyup(function(){

        setTimeout(function () {
            var term = inputFilter.val().toLowerCase();

            listItems.each(function(i, e){
                var city = ($(e).text()).toLowerCase();

                if(city.startsWith(term)){
                    console.log(city);
                }
            });
        }, 800);
    });

};

$('.my-input').filterList();

问题在于，无论用户键入多快，它都会在每次键入时触发。

如何实施延迟，以免每次触发keyup？

Answer 1

在每个连续的记录中，keypress您需要清除以前的计时器，以便该函数仅在键入结束后才触发X毫秒。尝试这个：

var timer;

inputFilter.keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(function () {
        var term = inputFilter.val().toLowerCase();

        listItems.each(function(i, e){
            var city = $(e).text().toLowerCase();
            if (city.startsWith(term)){
                console.log(city);
            }
        });
    }, 800);
});

基本例子