如何在jQuery keyup上实现延迟?

How do I implement a delay on jQuery keyup?

本文关键字：实现 延迟 keyup jQuery      更新时间：2023-09-26

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

这是我当前的代码:

$.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 ?

在每个连续的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>

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

尝试以下代码:

Html: 

<input type="text" id="inputtext" />
Jquery代码:

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

在每个按键计数点击后，其中一些触发功能。
建议:使用

.on('keyup', function(){}).
相关文章：