jQuery event only every time interval

$(document).ready(function() {

    $('#domain').change(function() {

        //

    });

});

The code inside the change function will basically send ajax request to run a PHP script. The #domain is a text input field. So 开发者_如何学JAVAbasically what I want to do is to send ajax requests as user types in some text inside the text field (for example search suggestions).

However, I would like to set a time interval in order to lessen the load of PHP server. Because if jQuery sends AJAX request every time user adds another letter to the text field it would consume lots of bandwidth.

So I would like to set let's say 2 seconds as an interval. The AJAX request will be fired every time the user types a letter but with maximum frequency of 2 seconds.

How can I do that?

$(function() {
  var timer = 0;
  $("#domain").change(function() {
    clearTimeout(timer);
    timer = setTimeout(function(){
      // Do stuff here
    }, 2000);
  });
});

$(document).ready(function() {

    var ajaxQueue;

    $('#domain').change(function() {

        if(!ajaxQueue) {
           ajaxQueue = setTimeout(function() { 
              /* your stuff */
              ajaxQueue = null;
          }, 2000);
        }

    });

});

What you really want to do is check how long since the last change event so you keep track of the number of milliseconds between events rather than make a call every 2 seconds.

$(document).ready(function() {

    var lastreq = 0; //0 means there were never any requests sent
    $('#domain').change(function() {
         var d = new Date();
         var currenttime = d.getTime(); //get the time of this change event
         var interval = currenttime - lastreq; //how many milliseconds since the last request
         if(interval >= 2000){ //more than 2 seconds
            lastreq = currenttime; //set lastreq for next change event
            //perform AJAX call
         }

   });

});

Off the top of my head without trying this in a browser. Something like this:

$('#domain').change(function() {

    if (!this.sendToServer) { // some expando property I made up
        var that = this;
        this.sendToServer = setTimeout(function(that) {
            // use "that" as a reference to your element that fired the onchange.
            // Do your AJAX call here
            that.sendToServer = undefined;
        }, yourTimeoutTimeInMillis)
    }
    else {
        clearTimeout(this.sendToServer);
    }
});

two variables, charBuffer, sendFlag

1. Use a setTimeout to have a function be called every two seconds.
   • This function checks if the buffer has stuff in it.
   • If it does, it sends/empties the stuff and clears the sent flag (to false).
     • and It should also clear the timeout, and set it again
   • else it sets the flag (to true).
2. Everytime the user hits a key, store it in the buffer.
   • if the sent flag is clear (it's false), do nothing.
   • else (it's true) send/empty the stuff currently in the buffer and clear the flag (to false),
     • and It should also clear the timeout, and set it again

This will make it so that the first time you press a key, it is sent, and a minimum of 2 seconds must pass before it can send again.

Could use some tweaking, but i use this setup to do something similar.

I am coming across this problem more and more (the more i do UI ajax stuff) so i packaged this up into a plugin available here