Problems with clearTimeout

[masterofzen]

I haven't had occasion to use clearTimeout before, and this first go-round isn't going too well. Is there something obvious I'm doing wrong? Here, check this out:

function reviewNick() {
    if (document.getElementById('nick').value.length < 6) {
        document.getElementById('nickavail').innerHTML = '<div class="nna">Your nickname must be six characters or longer.</div>';
    }
    else {
        if (nickTimeout) { window.clearTimeout(nickTimeout); }
        document.getElementById('nickavail').innerHTML = '<div class="nna"><em>Checking nickname for availability...</em></div>'
        var nickTimeout = window.setTimeout('checkNick();', 5000);
    }
}
 

Here's what I'm trying to do here. This is for a registration page, and I'm checking nicknames against a database to see if they exist when a user enters one. If it does, I'm displaying a message saying so. This reviewNick function is getting called every time the user presses a key, and it, in turn, calls a function called checkNick for some AJAX action. But here's the tricky part: I don't want the message to refresh every time the user presses a key. Instead, I want to wait five seconds after the user is finished typing and then report whether the nickname is taken or not.

I'm using setTimeout to do so, but here's the problem with that. The user presses a key and the timer begins, right? But if the user keeps pressing keys, that same timer will still be going. Every time I get a key press, I want to cancel the previous setTimeout and start a new one, so the message only appears if the user hasn't typed anything for five seconds. I figured clearTimeout was the answer to this, as you can see above. But it's not working. The timer continues to go off five seconds after the first keystroke, not the last one. The browser doesn't seem to recognize the nickTimeout variable I'm setting -- I've tried testing with alerts, but the alerts say the variable is undefined. If I stick the alert after the variable definition, I get something. But if I put the alert at the beginning of the else statement, it's undefined, even after a whole lot of keystrokes should have defined it a whole lot of times.

Any ideas what's going on here?

[pbmods]

var nickTimeout = window.setTimeout('checkNick();', 5000);

By using the var keyword, you are scoping nickTimeout to your function rather than window.

Instead, you want to do this:

nickTimeout = window.setTimeout('checkNick();', 5000);
 
// Or...
window.nickTimeout = window.setTimeout('checkNick();', 5000);
 
// Or...
window['nickTimeout'] = window.setTimeout('checkNick();', 5000);
 

[masterofzen]

Thanks a lot! Embarrassingly, I did not know that about the var keyword -- I always thought it was just there for stylistic reasons. The window.nickTimeout solution worked great, though I also had to change all other nickTimeout references to window.nickTimeout.