Question

Possible Duplicate:
Throttle event calls in jQuery

I like the .change() functionality of jQuery, but I’d like to prevent triggering a ton of AJAX requests when a user quickly changes options in a select drop down. As an example, when a user uses a mouse scroll wheel, it will trigger each options as they pick their new option.

I’d like to come up with a good clean way to handle only sending these updates once the user stops updating the select dropdown a second.

Is there a neat way of handling this situation?

Answer 1

The typical way to do this is with a setTimeout and clearTimeout:

var wto;

$('#select').change(function() {
  clearTimeout(wto);
  wto = setTimeout(function() {
    // do stuff when user has been idle for 1 second
  }, 1000);
});