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

Basic example

Answer 2

.color-red{
    color: #F00;
}

Answer 3

尝试以下代码：

HTML：

<input type="text" id="inputtext" />

Jquery代码：

<script type="text/javascript">
        $(document).ready(function () {
            $('#inputtext').keyup(function () {
                setTimeout(function () {
                    alert("Hi");
                }, 5000);
            });
        });
    </script>

Answer 4

在每个键盘计数点击后，其中一些触发功能专业提示：并使用

find_method

如何实现jQuery keyup的延迟？

4 个答案: