如何在 jQuery keyup 上实现延迟？

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

这是一个简化的工作示例：

var timer;
$('#foo').keypress(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    $('div').fadeIn('fast').delay(1000).fadeOut('fast');
  }, 800);
});

div { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" />
<div>You stopped typing 1 second ago</div>

Answer 2

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

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

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

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

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

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

.on('keyup', function(){}).