javascript - How do I implement a delay on jQuery keyup? - Stack Overflow

admin管理员组

文章数量:1291139

I'm making a list filter and want a delay in case the user is a fast typer. Looking at different solutions for similar questions hasn't helped me and I don't understand the logic they implement.

This is my current code:

$.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();

The problem with this is that it will trigger on each keyup, no matter how fast the user types.

How can I implement a delay so that it does not trigger for each keyup?

I'm making a list filter and want a delay in case the user is a fast typer. Looking at different solutions for similar questions hasn't helped me and I don't understand the logic they implement.

This is my current code:

$.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();

The problem with this is that it will trigger on each keyup, no matter how fast the user types.

How can I implement a delay so that it does not trigger for each keyup?

• javascript
• jquery
• filter

Share Improve this question Follow asked Jul 30, 2015 at 9:29 StevenSteven 19.5k4949 gold badges155155 silver badges263263 bronze badges 2

• keyup is meant to trigger for each key released. You can only control what you do in the event handler. – lshettyl Commented Jul 30, 2015 at 9:36
• possible duplicate of Jquery function to delay sometime after Keyup – Andreas Louv Commented Jul 30, 2015 at 9:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

On each successive keypress you need to clear the previous timer so that the function only fires X milliseconds after typing ends. Try this:

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

Here's a simplified working example:

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

try the following code:

Html:

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

Jquery code:

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

On each keyup count clicks and after some of them trigger function.
Pro-tip: And use

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

本文标签： javascriptHow do I implement a delay on jQuery keyupStack Overflow