User idle time while typing in input

Question

The problem I'm having is a search function which should call my doSearch()-method after the user stopped typing for at least 100ms in my $("input#q) field.

I tried to achieve this by using the logic of this answer, but I'm stuck with where I should set/unset the setInterval() which increments the idleTime.

var idleTime = 0;

$("input#q").keyup(function() {
  idleTime = 0;
  idleInterval = setInterval(function() {
    idleTimeIncrement();
  }, 25);
});

function idleTimeIncrement() {
  idleTime += 25;
  if (idleTime >= 100) {
    doSearch($("input#q").val());
  }
}

The error I'm getting in Firebug Console says:

Too much recursion.

So I guess I'm having an infinite loop in my code... ;-)

Answer 1

You need to reset your timer when you start a new one. Here's what I would do:

var timer = null;
$('input#q').keyup(function() {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        doSearch($('input#q').val())
    }, 100);
});