Delaying An Ajax Call

[David]

The code validates a first/last name combination.

 

function checkName() { 

 // set data constant variables
 var first = document.getElementById("first_name").value;

 // identify field to watch
 var input = document.getElementById("last_name");

 // if the text field has value, process the content
 if (input.value) {

   // query to be run on database
   getdata = ("webaddress.php?f=" + first + "&l=" + input.value);

   // other AJAX stuff goes here

 }

xhr.open('GET', getdata, true);
xhr.send(null);

}

<input id="first_name" type="text"/>
<input id="last_name" type="text" onkeyup="checkName()"/>

 

The current setup calls the function on each keystroke in the last_name field.

 

What I would like to do is get the code to listen for a pause in the keystrokes - perhaps a pause longer than three seconds - before sending the AJAX request.

 

The idea would be to somehow delay the function from firing until the typing has most likely been completed.

 

Onblur is right out because the balance of the form is invisible until the name validates.

 

Any ideas or suggestions would be appreciated.

 

- David

[HartleySan]

The following link might be of use:

 

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

 

Basically, I would use the JS setTimeout function and add a 3,000 millisecond pause, and then execute the proper function.

 

By the way, why did you set first to the node.value, but last to just the node? Also, why did you put the getdata computation in parentheses? Just curious.

[David]

By the way, why did you set first to the node.value, but last to just the node? Also, why did you put the getdata computation in parentheses? Just curious.

 

I don't know.

 

The code was cobbled together from various examples that purport to do what I am intending to accomplish.

I'd reckon the original coder (whose code I've 'borrowed') decided to do it that way.

 

When (if?) I reach a point of actually understanding any of this, I figure to through and make it all proper.

 

You're right about that setTimeout() function. It pauses the code execution for a specified time.

 

What I am finding, however, is that the timer will not 'reset to zero' if there has been another

keystroke - it merely 'pauses' the ultimate code execution called by each keystroke.

 

The net result of this is that the code still checks each letter as it's typed - but with a time delay added.

 

In a moment of brilliance, I deduced that clearTimeout() might be the missing link:

 

function checkName(keyEvent) {

 // kill timer if running
 if (x) {
   clearTimeout(x);
 }

 // create new variable
 var x;

 // set specified time
 x = setTimeout(function(){

   // funky AJAX happens here

 }, 3000);

}

 

Still didn't work the way it should.

 

I suppose it should go something like this:

 

function checkName(keyEvent) { 

 // kill previous timer, if running 

 // reset timer to zero

 // listen for keystoke

 // if no keystroke, and timer has reached 3 seconds {

     // execute AJAX call

 // } otherwise a keystoke occurred {

     // rinse and repeat
 //} 

}

 

Or something.

 

- David

[HartleySan]

Long story short, the scope of your variable x is limited to within the checkName function. As soon as the setTimeout function is executed and set to x, the checkName function ends, and so does the existence of x. As such, x will never exist for the if test at the top of the function.

 

I suppose the easiest solution would be to declare the x variable globally. I would start with that, and once you get everything working, then you can worry more about variable scope, which can be a tricky matter.

 

Truth be told, in most cases, I see no problem with global variable declarations, even though hardcore OOP programmers would grate their teeth at such a statement.

 

Either way, hope that helps. Also, I would preface all JS variable declarations with var. For example:

 

[b]var[/b] x = setTimeout(function(){ 

   // funky AJAX happens here 

 }, 3000);

 

Edit: Message board fail there with the bold inside the code. Larry, you may wanna have someone fix that.

[Larry]

Thanks for helping, HartleySan. I've got a fix for the bold/code issue: don't use bold within code!

[HartleySan]

Yeah, I know. I know the code is just pre'ing everything, but it would have been nice. Oh well.