Question

I have a form with multiple buttons, sliders, etc. that all trigger a main ajax pricing function when clicked, dragged, etc. Often a button is clicked multiple times consecutively in a short amount of time (e.g. a + button to increase a value).

Instead of calling the main ajax function each time, I would like JQuery to wait for 1 sec after the LAST trigger event is done before executing. In other words, if the function is triggered < 1s since the last trigger… wait.

Answer 1

I would do a setTimeout call each time something changes, and set the timeout to 1000 ms. Store the returned value from the setTimeout call, and if a change occurs before the setTimeout call fires its callback, cancel the setTimeout and start another one.

var priceAdjustmentTimeout;
function somethingChanged() {
  if (priceAdjustment) {
    clearTimeout(priceAdjustmentTimeout);
  }
  priceAdjustmentTimeout = setTimeout(doPriceAdjustment, 1000);
}

function doPriceAdjustment() { 
  priceAdjustmentTimeout = null;
  /* do stuff here */
}