Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript : how to add delay

Posted on 2004-11-17
8
Medium Priority
?
1,251 Views
Last Modified: 2008-01-09
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 ?
0
Comment
Question by:Gitcho
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 15

Expert Comment

by:Colosseo
ID: 12609644
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12609728
<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
 
LVL 5

Author Comment

by:Gitcho
ID: 12610037
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12610192
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
 
LVL 18

Expert Comment

by:arantius
ID: 12610899
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
 
LVL 5

Author Comment

by:Gitcho
ID: 12615360
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
 
LVL 2

Accepted Solution

by:
java_programmer earned 2000 total points
ID: 12616222
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
 
LVL 2

Expert Comment

by:java_programmer
ID: 12659604
did you get it working?
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month20 days, 16 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question