jQuery event only every time interval

Question

$(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 basically 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?

Answer 1

$(document).ready(function() {

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

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

    });

});

Answer 2

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

Answer 3

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
         }

   });

});

Answer 4

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);
    }
});

Answer 5

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.