javascript - jQuery keypress event wait 0.5 seconds for another user-keypress - Stack Overflow

admin管理员组

文章数量:1343311

I'm currently developing a live search for my website and I want to decrease some unnecessary request with some simple jQuery (of course I have a back-end-flood-control). I've got a keydown-event-listener for my search-field. This listener currenty only fires the ajax mand for the PHP search-function if val().length is >= 3.

But now I want an additional condition. So when the length is >= 3, I want to wait for about 0.5s or so if the user is performing another keypress. If he does, the function should not be called and I want the listener to wait another 0.5s and wait again for more user-input, and so on. How do I realize a function like that?

I'm currently developing a live search for my website and I want to decrease some unnecessary request with some simple jQuery (of course I have a back-end-flood-control). I've got a keydown-event-listener for my search-field. This listener currenty only fires the ajax mand for the PHP search-function if val().length is >= 3.

But now I want an additional condition. So when the length is >= 3, I want to wait for about 0.5s or so if the user is performing another keypress. If he does, the function should not be called and I want the listener to wait another 0.5s and wait again for more user-input, and so on. How do I realize a function like that?

• javascript
• jquery
• events
• keypress
• jquery-events

Share Improve this question Follow edited May 30, 2020 at 16:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 14, 2014 at 14:21 user2655665user2655665 25711 gold badge44 silver badges1111 bronze badges 3

• 2 In the event handler use clearTimeout to cancel any previous 0.5 second wait, and setTimeout to start a new wait, and have the timeout invoke the rest of what you want. – Paul S. Commented Feb 14, 2014 at 14:23
• Wow, that seems easy. I'll try that. So the event handler should always first perform a clearTimeout()? – user2655665 Commented Feb 14, 2014 at 14:26
• Pretty much, see the code in my answer for some guidance. – Mild Fuzz Commented Feb 14, 2014 at 14:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

var timeout;

$('#yousearchbox').on('keyup',function(){
  //if you already have a timout, clear it
  if(timeout){ clearTimeout(timeout);}

  //start new time, to perform ajax stuff in 500ms
  timeout = setTimeout(function() {
   //your ajax stuff
  },500);
})

本文标签： javascriptjQuery keypress event wait 05 seconds for another userkeypressStack Overflow