I have an input field, and it has a keyup event:
$(document).ready(function() {
$('#SearchInputBox').keyup(function() {
DoSearch($(this).val());
});
});
How can I add a delay time, so that only when the user stopped typing for 1 second, then it will run the DoSearch function. I don't want to keep running it every time the user types a key because if they type fast, then it will lag.
There are two ways to achieve the same: Approach 1: Using the keypress(), fadeIn(), delay() and fadeOut() methods in the jQuery library and clearTimeout() and setTimeout() methods in native JavaScript.
$('input#username'). keypress(function() { var _this = $(this); // copy of this object for further usage setTimeout(function() { $. post('/ajax/fetch', { type: 'username', value: _this.
The keyup event is fired when a key is released. The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup , but as 97 by keypress .
Basically, set a timeout on each keyup. If there's already a timeout running, clear it and set another. The DoSearch()
function will only run when the timeout is allowed to complete without being reset by another keyup (i.e., when the user has stopped typing for 1000ms).
var timeout = null;
$('#SearchInputBox').on('keyup', function () {
var that = this;
if (timeout !== null) {
clearTimeout(timeout);
}
timeout = setTimeout(function () {
DoSearch($(that).val());
}, 1000);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With