JavaScript timeout fires 3 times instead of once (clearTimeout is not working ?)

Question

I want to fire an ajax action when user make a pause in typing (instead of after every keypressed). So I made something like this:

When the user stops typing after 3 secs of being idle function done is to be executed ... (it is - but why 3 times for long phrases - I would expect it to run only once since I clear timeout after every keydown). What is the problem ?

var timer; 
var interval = 3000; 
$('#inp').keyup(function() {
  timer = setTimeout(done, interval); 
}); 

$('#inp').keydown(function() {
  clearTimeout(timer)  
}); 

function done() {
  console.log('ajax'); 
}

Working example on jsfiddle : http://jsfiddle.net/vtwVH/

http://stackoverflow.com/questions/1909441/jquery-keyup-delay — Nishant Jani, Feb 01 '13 at 13:13

pimvdb · Answer 1 · 2013-02-01T13:07:55.657

9

When you type, you may sometimes press down another key before releasing the first. You may not notice this, particularly if you're typing a long phrase. In that case, the order of events is not down up down up but down down up up, and so two timeouts will be set.

It is more consistent to clear the timeout just before setting it (in the same event handler).

edited Feb 01 '13 at 13:07

answered Feb 01 '13 at 13:01

pimvdb

151,816
78
307
352

score 7 · Accepted Answer · answered Feb 01 '13 at 13:08

The Problem is you are overwriting the timer variable in your keydown event.

So if you press another key before the Timout gets cleared e.g keep holding a key

The reference to the timeOut is lost and you cannot clear it again.

To fix this you could just clear and set the Timer in the keyUp event like

var timer; 
var interval = 3000; 


$('#inp').keyup(function(e){ 
    if(timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(done, interval); 

}); 

function done() {
    console.log('ajax'); 
}

Heres a working fiddle

score 1 · Answer 3 · answered Feb 01 '13 at 13:04

The events seem to not follow strict sequential rules, second keydown comes earlier than first keyup, so the timer gets initialized multiple times.

Try this mod:

$('#inp').keyup(function(){
  clearTimeout(timer);
  timer = setTimeout(done, interval); 
});

score 0 · Answer 4 · answered Feb 01 '13 at 13:03

Just make sure you clear the interval:

var timer; 
var interval = 3000; 


$('#inp').keyup(function(){
  clearTimeout(timer)  
  timer = setTimeout(done, interval); 
}); 

$('#inp').keydown(function(){
  clearTimeout(timer)  
}); 

function done() {
  console.log('ajax'); 
}

JSFiddle

score 0 · Answer 5 · answered Feb 01 '13 at 13:11

Unless the user types really slow, the keydown and keyup won't come in the order that you think. You can for example get two keydown events followed by two keyup events. If you don't handle that, the second keyup event will start another timer and overwrite the reference to the first timer so that it won't be cleared.

Keep track of whether the timeout is running, and clear it in keyup if it is running:

var timer = null;
var interval = 3000; 
$('#inp').keyup(function(){
  if (timer != null) {
    window.clearTimeout(timer)  
  }
  timer = window.setTimeout(done, interval); 
}); 

$('#inp').keydown(function(){
  if (timer != null) {
    window.clearTimeout(timer);
    timer = null;
  }
}); 

function done() {
  timer = null;
  console.log('ajax'); 
}

Demo: http://jsfiddle.net/Guffa/vtwVH/3/

JavaScript timeout fires 3 times instead of once (clearTimeout is not working ?)

5 Answers5