Javascript : how to add delay

I've got a text field that looks like this :

<input type="text" name="my_text_field" onKeyUp="do_this_task();">

The problem is that onKeyUp will call the function "do_this_task()" the very instant the key is "up" ... how do I add a delay in the do_this_task() function, so that the actions will only be performed after a full second of inactivity (or 500 milliseconds or whatever) ?  

If someone types really fast, i'd like there to be a bit of a pause (to give them a brief bit of time to finish typing) before the actions are performed.  Any ideas ?
LVL 5
GitchoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ColosseoCommented:
Hi

you could do something like this

<input type="text" name="my_text_field" onKeyUp="setTimeout('do_this_task()',500);">

Which will delay for 500 milliseconds however it will run the code for each key press so not sure if it will suit your purpose?

Scott
0
COBOLdinosaurCommented:
<input type="text" onkeyup="x=setInterval('yourfunction()',500)"
                           onkeydown="if(x) clearInterval(x)">

and in the function you need to add clearInterval(x) as well

the variable x should be declared as a global boolean:  var x=false;

Cd&
0
GitchoAuthor Commented:
I think I've almost got it ... did what you said, but still not quite there ...

I'm building a form that builds and submits an LDAP query string to an ASP page which searches AD for users, and returns the results in XML format, and displays a narrowing list as you enter more information about the user (last name, first name, sAMAccountName etc.).  

A server-request is made each time a you enter more info on the user you're searching for, using the onKeyUp - which works fine, but I want the delay to reduce the server round-trips.

here's my HTML code ...
--------------------------------------------------------------------------------------------------------
<input type="text" id="newuser_surname" name="newuser_surname" value="" onKeyUp="x=setInterval('checkSend()',500)" onKeyDown="if(x) clearInterval(x)">
<input type="text" id="newuser_givenName" name="newuser_givenName" value="" onKeyUp="x=setInterval('checkSend()',500)" onKeyDown="if(x) clearInterval(x)">

here's my JAVASCRIPT code ...
--------------------------------------------------------------------------------------------------------
<script>
function checkSend(submit_search)
{
      var tag = "ldap_search_filter_string";
      var LDAPFilter;

      clearInterval(x);
      
      // set the LDAP filter string, based on user input ... eg. (sn=*)(givenName=*)(sAMAccountName=*)
      LDAPFilter = buildLDAPFilter(submit_search ? true : false);

      if (LDAPFilter) {
            // display updated LDAP filter on page
            setInnerHTML(tag,LDAPFilter);
            // send xml object to ASP page for search
            send("",LDAPFilter);
      }
}

</script>
-------------------------------------------------------------

Let me know if you need me to post more code ...

Thanks for your help
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

COBOLdinosaurCommented:
The checkSend function is using an argument, but you are not passing anything.  I'm also not sure that half a second is enough time for the necessary server processing unless it is a really fast connection.

Cd&
0
arantiusCommented:
Actually, that function does not technically break any javascript rules, it's valid.
It may be a logic error, though.  As used it will always pass false to buildLDAPFilter because submit_search will never evaluate to true, it will always be undefined.

I would suggest, also, that you use settimeout instead of setinterval.  settimeout evaluates the function once, after the specified timeout, instead of constantly .. thus you would not need to clear it in the function.
0
GitchoAuthor Commented:
I pass a boolean to the checkSend function from somewhere else in the form (a "Search Now" button) when I want to perform the query right away, instead of validating input (eg. last name must be at least 3 chars, first name must have 1 .. etc.) before bulding the LDAP filter ... which is why I use "buildLDAPFilter(submit_search ? true : false);" ...

Can I get an example of either the settimeout() or a working setinterval() ?  ...  setinterval() does work for the typing delay, but keeps calling the function after the typing is done.  

I just want a short delay before the query is sent to the ASP page ... (it works just fine at 500ms, even at 100 ms ... LDAP is a very light-weight protocol - by definition) ...
0
java_programmerCommented:
All I would do is add a global var called "lastkeystroketime" or something, then in you do_this_task() you do this

do_this_task()
curtime=getTime();
if (curtime-lastkeystroketime > whatever 1 sec )
{
   do your ladap stuff
}
else
{
lastkeystriketime=curtime;
setTimeout('do_this_task()',1000);
}
}

Done!  basically it will pause for a sec, then check again, if the user is not typing, it will then look it up. Voila!
Cheers,
Derek
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
java_programmerCommented:
did you get it working?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.