Wait for function till user stops typing

Question

I have users making ajax call while typing. The problem is that it makes the call for every letter being typed, so I set timeout like this:

$(input).live('keyup', function(e){

setTimeout(function(){ 

var xx = $(input).val();
doSearch(xx); 

}, 400); 

}); 

It does wait for 400ms but then executes for every keyup. How can I change this to make the ajax call only 'once' about 400ms after the last typed letter?

(I used 'delay' in the past but that doesn't work at all with my script...)

Solution 1

timer = 0;
function mySearch (){ 
    var xx = $(input).val();
    doSearch(xx); 
}
$(input).live('keyup', function(e){
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(mySearch, 400); 
});

it's better to move your function to a named function and call it multiple times, 'cause otherwise you're creating another lambda function on each keyup which is unnecessary and relatively expensive

Solution 2

You need to reset the timer each time a new key is pressed, e.g.

(function() {
    var timer = null;

    $(input).live('keyup', function(e) {
        timer = setTimeout(..., 400);
    });

    $(input).live('keydown', function(e) {
        clearTimeout(timer);
    });
)();

The function expression is used to ensure that the timer variable's scope is restricted to those two functions that need it.

Comments

[Youss]

Seems like a workaround...The answer provided by @Flöcsy is more straight forward. ps what is outRunningAJob:)

[Alnitak]

@Youss and what happens if you press and release one key, and then hold another key down?

[Gavriel]

@Alnitak, you're right, and there are other problems with this, for example when you type too slow (more than 400ms between 2 keys), but in normal case it makes things smoother

[Alnitak]

@Flöcsy the typing too slow problem is unavoidable. The key press one is, with my answer, since the timer clear is down on key down, not on each new key up.

[Youss]

@Alnitak My REAL problem was that typing was not smooth when fast typing (request was made, hence typing would stop and later cache up on itself). Slow typing is not a problem since I want the element of 'live search'

[Alnitak]

@Youss yup, I was just trying to make the point that IMHO clearing the timer is better done on key down than on key up.

[veeTrain]

I personally haven't yet become comfortable with the timeout functions and so I thought maybe you were in a similar place since you are asking about it. Is it a workaround? It is how I would currently approach the problem. If you are currently more familiar with using delay then this might be a better solution (in a maintainability respect). 'outRunningAJob' is just arbitrary but self-documenting. Glad you liked it :-)

[ZombieCode]

Should probably use .on('keyup', ...) Since jquery 1.7 .live has been deprecated.

[Alnitak]

@Ekaterina yes, it probably should, but this was the minimal set of changes to the OP's code.