javascript - jQuery event only every time interval - Stack Overflow

admin管理员组

文章数量:1202333

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

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

• javascript
• jquery

Share Improve this question Follow asked Nov 18, 2009 at 17:45 Richard KnopRichard Knop 83.7k154154 gold badges398398 silver badges560560 bronze badges 1

• See stackoverflow.com/questions/1715399/… and stackoverflow.com/questions/1620602/… and – Crescent Fresh Commented Nov 18, 2009 at 17:50

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 10

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

本文标签： javascriptjQuery event only every time intervalStack Overflow