JavaScript onKeyUp time delay

Question

I need some help with a JavaScript function that I call onKeyUp, it is a Ajax function but every time I write any character it calls the function and it slow the page performance and it check every time, it is an user check with the database.

I tried this:

 var timer;
 function chk_me(){

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

But my validate function have a parameter so I am unable to pass it, I call the function like this:

<input type="text" name="usuario" id="usuario" class="required" onKeyUp="chk_me();" minlegth="4" value=/>

Is it right? What should I do?

It is my first question and I hope that you all understand it

Thanks, Alberto

Thank you all, since I am new I cant do it in a different answer so I edited my question with the solution. I find this: http://bytes.com/topic/javascript/answers/451142-need-advice-acting-only-last-onkeyup-event-series and use the last answer method and add it some code, I leave you the code, like it say it isnt the best way but works so if you have some other way I will appreciate it and use it here it is:

var keyCount = 0;
var timeoutCount = 0;

function handleKeyUp() // keyup handler
{
keyCount++;
setTimeout("compareCounts()", 500);
}

function compareCounts()
{
var usuario = document.profileForm.usuario.value;
timeoutCount++;
if (keyCount == timeoutCount)
{
xajax_checaUsuario(usuario);
}
}

So I take the var in that way any suggestions to make it better?

Thanks

Can you please elaborate on 'slow the page performance?' What exactly is the problem? Typing is slow, interacting with the page is slow? — mrtsherman, Jul 18 '11 at 22:22
Well it doesnt slow the performance I miss type, the ajax is slower tha the Javascript so i shows with every key pressed if it is available or no and when you though that it is available it can shows you that it isnt available @mrtsherman thanks — apz2000, Jul 18 '11 at 22:56
possible duplicate of [jQuery .keyup() delay](http://stackoverflow.com/questions/1909441/jquery-keyup-delay) — Wayne, Jul 18 '11 at 22:59
You're looking for a "debouncer". This has been answered many times on SO in various contexts. Here's an example I gave a while back: http://stackoverflow.com/questions/5041548/preventing-a-callback-from-executing-until-input-stops/5044395#5044395 — Wayne, Jul 18 '11 at 23:00
I cant use jQuery thats my main problem, I know that with it all the things become easier — apz2000, Jul 18 '11 at 23:05

score 7 · Accepted Answer · answered Jul 18 '11 at 22:59

7

Don't pass validate directly to setTimeout, but rather call it from within an anonymous function:

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

answered Jul 18 '11 at 22:59

gilly3

87,962
25
144
176

I didn't understood that at first but then I use it and when perfect, thanks man – apz2000 Jul 19 '11 at 18:01

Zoidberg · Answer 2 · 2011-07-19T01:59:29.877

0

You can do the following

var timer;
 function chk_me(myparam){

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

In javascript you can access any variables in the scope in which the function is defined. And below is how you use it.

<input type="text" name="usuario" id="usuario" class="required" onKeyUp="chk_me('stringval');" minlegth="4" value=/>

edited Jul 19 '11 at 01:59

answered Jul 18 '11 at 22:26

Zoidberg

10,137
2
31
53

I have tried that but it takes like different var each myparam – apz2000 Jul 18 '11 at 22:36
I have find the solution, what I do is this: `var keyCount = 0; var timeoutCount = 0; function handleKeyUp() // keyup handler { keyCount++; setTimeout("compareCounts()", 500); } function compareCounts() { var user = document.profileForm.usuario.value; timeoutCount++; if (keyCount == timeoutCount) { //my process } }` So I take the value of that specific field Thanks @Zoidberg anyways, I think that this isnt the best way but this works for me – apz2000 Jul 18 '11 at 23:00
@Zoidberg - `setTimeout` can't pass parameters to the function you specify, so the way you did it in your answer won't work. You can pass it a function that in turn calls a second function with parameters: see gilly3's answer. – nnnnnn Jul 19 '11 at 00:43
@nnnnn Yes, sorry, small typo... I did not meant to put it in the second function's signature. – Zoidberg Jul 19 '11 at 01:59

score 0 · Answer 3 · answered Jul 18 '11 at 22:52

If I understood your question correctly, I think what you want is to contain your parameter within a closure:

var timer;
function chk_me(myparam) {

    clearTimeout(timer);
    var validate = function() {

       //do stuff with myparam
       var foo = myparam;

    }
    timer=setTimeout(validate,1000);
}

As before, the timer ensures any previous calls are canceled, unless there's been a 1 second wait, and when you define validate within the scope of chk_me, the local variable myparam will be visible inside it, even when it's handle is passed to setTimeout.

JavaScript onKeyUp time delay

3 Answers3