OnKeyUp JavaScript Time Delay?

Question

Hi Again Masters Of The Web :) Now, I have got a new stupid question, and I am asking to forgive me. I read everywhere about this solution, but didn't find the one that works for me.

I have got:

<input name="domain" type="text" id="domain" onKeyUp="javascript:chk_me();">

All I am asking is how to make this not to check after a button is pressed, but after to say 1000 miliseconds of keyboard inactivity?

Answer 1

Try this:

var timer;
function chk_me(){
   clearTimeout(timer);
   timer=setTimeout(function validate(){...},1000);
}

In this way every time a key is pressed, the timeout will be deleted and the set again.

Answer 2

Another approach, without globals:

var typewatch = function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    }  
}();

Usage:

Attaching the event through JavaScript:

window.onload = function () {
    document.getElementById('domain').onkeyup = function() {
        typewatch(function(){alert('Time elapsed!');}, 1000 );
    };
};

Or using an inline event handler (not so much recommended) as you have in your example:

<input type="text" name="domain" id="domain"
   onKeyUp="typewatch(function(){alert('Time elapsed!');}, 1000 );"/>

Try a demo here.

Answer 3

Really useful post!

Another approach without globals, using function properties:

function chk_me(){
   if(typeof timer !== undefined){
     clearTimeout(this.timer);
   }
   this.timer=setTimeout(function validate(){validate(...)},1000);
}

Answer 4

setTimeOut() would be the one ;)

<input name="domain" type="text" id="domain" onKeyUp="setTimeout('chk_me()',1000);">

link text