Question

I want to make an ajax auto complete field like stack overflow’s tag search box(used to add favorite tags and add tags to your question). I used to call ajax every time key’s up,but I think it’s not efficient.

I find stack overflow does it well. I guess it would only call ajax when key’s up and some time has passed. I then wrote these lines to test:

$("#a").keyup(function(){
    clearTimeout(c);
    var c=setTimeout(alert("keyup and 0.5s have passed"),500);
})

it does alert after key up and after 0.5 seconds, but it alert several times as key up times. Does clearTimeout() suppose to stop setTimeout() to be executed? Why it doesn’t work? What’s the right way to do this?

Answer 1

c is a local variable and its value is lost as soon as function returns. Try something like this:

var timeoutId = null;

$("#a").keyup(function(){
    clearTimeout(timeoutId);
    timeoutId = setTimeout(alert("keyup after 0.5s"),500);
})