onkeyup事件触发延迟

I have a input textbox for people to enter a username, it has a onkeyup event attribute attached which fires off an AJAX request to check if the username is taken.

  1. What is the delay between the first key to the second ? Meaning if I type a 5 letter word one letter after the other. Does the AJAX fire 5 times ?

  2. If there is no delay, would this be "computationally expensive" since there would so many database queries ? Or would there be no noticeable difference ?

  3. If there is a difference in performance, what methods could I take using Javascript to check if the user is actually "done" typing. I still want it to automatically check after typing. Thus ruling out onblur attributes etc.

My Code: http://pastebin.com/hXfgk7nL
(code indentation wasn't working for me on stack overflow)

yes it will fire. if you don't need that means, you have to check conditions with a flag. check the given value with the previous value which is stored in a variable.

You can try to check if your input is modified in 500 ms. Is is not, then make only one ajax request. If the input is modified again than you must repeat the process again.

I suggest to use setInterval for that.

Yes it will fire multiple times, one for each keystroke. You are triggering multiple AJAX calls, so you are wasting network and server resources.

Additionally, you are not guaranteed on the order in which the calls will return, so if for some network reason, the first call issued return last, it will overwrite the results of the most recent request.

To tackle the problem, you are looking for something like this plugin: https://github.com/cowboy/jquery-throttle-debounce.

From the plugin usage example:

function ajax_lookup( event ) {
  // Perform an AJAX lookup on $(this).val();
};

// Console logging happens on keyup, for every single key
// pressed, which is WAAAY more often than you want it to.
$('input:text').keyup( ajax_lookup );

// Console logging happens on window keyup, but only after
// the user has stopped typing for 250ms.
$('input:text').keyup( $.debounce( 250, ajax_lookup ) );

Note that despite the name the plugin can also be used stand alone, without jquery.

Following are my replies/suggestion for your queries:

  1. Yes , it will fire 5 fives because 5 times key-up event will be triggered.
  2. it will be a performance issue, resulting in slow response from server,also since your making multiple ajax request sequentially, the response from each request may not be sequential.your code will suffer from logic issue.
  3. instead of making ajax call for key-up, you can use it for blur event.

Suggestion: before making a ajax call validate the field for basic errors like blank string, numbers etc.,(depending on your requirement).

Yes, it will fire every key-up event. You can reduce the performance hit using following approach.

  1. I am sure you must have a minimum character length for username. Wait until user type that number of characters to query the database.

  2. You could always bring all the usernames starting with user typed username and process in local memory. This may not be real time but would reduce the number database queries. Also it would depend on the size of your current user list.

  3. Double check the existence of the username before saving it to the database.

Yes it will fire EVERYTIME you type a character and you're not going to like that in terms of your page performance. You can implement delays on executing the call back if you like ie. it will not be executed until the user stopped typing. Here's an example:

           $(document).ready(function(){
                $('#txtboxid').keyup(function(){
                 clearTimeout(timer); 
                 timer = setTimeout(function(){ 
                      //call your function here
               }, 250) // you can change the 250 here to a higher number if you want the delay to be longer. In this case, 250 means a quarter of a second.
        });});