HTMLHelp Forums > Fire js after x seconds of inactivity

Full Version: Fire js after x seconds of inactivity

HTMLHelp Forums > Programming > Client-side Scripting

DeaPeaJay

Jan 30 2007, 11:19 AM

I'm trying to get some javascript to run after a certain amount of time passes by and the user hasn't typed anything in a text field.

Basically what I'm doing is programming search functionality with AJAX in .Net (using Anthem) on a web application for our intranet. (So I'm sure it will work on the target audience

)

What I'd like it to do is behave like Spotlight in OS X. Searching and returning results from the server AS the user is typing into the field. I'm using the onKeyUp event and it's firing after every single keystroke. The problem is, that's too frequently. I don't want it searching for individual letters or half words. So if I can make it fire after x amount of milliseconds of inactivity it would be perfect.

I tried this, but the problem is that it waits and then fires all the keystroke events at once, resulting in the screen flashing real quick as it fires for each letter.

CODE

onKeyUp="setTimeout('this.blur(); this.focus()', 1250)"

And just so you know, the blur and focus methods are basically what make the .NET TextChanged event fire.

Any ideas?

Christian J

Jan 30 2007, 02:06 PM

Perhaps you could let clearTimeout() cancel any previous setTimeouts, before setting a new one?

Another idea might be to only run the search if the space bar (and hyphens?) is used:

CODE

The above is partly stolen from http://www.javascriptkit.com/javatutors/javascriptkey.shtml and seems to work in my Windows browsers; don't know about Safari/Mac.

DeaPeaJay

Jan 30 2007, 03:45 PM

That is so weird. I was going to try the clearTimeout method you mentioned. But I wanted to move the functionality to a function to be called from the onKeyUp Event. Well I just cut and pasted what I posted earlier into the function and tested it to make sure the function was working before I continued. Then, to my surprise it was behaving very very well! It was no longer catching up to itself with each key up event.

It seems like the function call can't stack up on itself. The last call made cancelled out the previous calls! Cool

DeaPeaJay

Jan 30 2007, 03:52 PM

actually I'm gonna have to scratch what I just said. Because I started typing a long word slowly, but 1250 milliseconds after i typed the first letter, it started to keep up with my typing.

I honestly can't figure out what it's doing or why the function makes it behave better, but it is.

Effovex

Jan 30 2007, 04:28 PM

Count how many timeouts you have on the "stack", and only execute the function when there's only one.

CODE

stack = 0;

function caller(object) {
stack++;
setTimeout("doer(object)", 1250);
}

function doer(object) {
if(stack == 1) {
    object.blur;
    object.focus;
  }
stack--;
}

DeaPeaJay

Jan 31 2007, 08:32 AM

QUOTE(Effovex @ Jan 30 2007, 04:28 PM)

Count how many timeouts you have on the "stack", and only execute the function when there's only one.

Thanks alot! that works great! It's very smooth now. I was able to lower the delay to 400 milliseconds and it's very smooth =)

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.