JavaScript onKeyUp time delay - Stack Overflow

admin管理员组

文章数量:1327486

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: 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("pareCounts()", 500);
}

function pareCounts()
{
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

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./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("pareCounts()", 500);
}

function pareCounts()
{
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

• javascript
• onkeyup
• timedelay

Share Improve this question Follow edited Jul 18, 2011 at 23:17 apz2000 asked Jul 18, 2011 at 22:17 apz2000apz2000 13211 gold badge66 silver badges1515 bronze badges 5

• Can you please elaborate on 'slow the page performance?' What exactly is the problem? Typing is slow, interacting with the page is slow? – mrtsherman Commented Jul 18, 2011 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 Commented Jul 18, 2011 at 22:56
• possible duplicate of jQuery .keyup() delay – Wayne Commented Jul 18, 2011 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: stackoverflow./questions/5041548/… – Wayne Commented Jul 18, 2011 at 23:00
• I cant use jQuery thats my main problem, I know that with it all the things bee easier – apz2000 Commented Jul 18, 2011 at 23:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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);
}

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.

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=/>

本文标签： JavaScript onKeyUp time delayStack Overflow