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.

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.

• javascript
• jquery
• timer
• user-input

1 Answer 1

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