Question

i have a button that says “Next” and everytime i click it, it that increments a value and generate an ajax call with a callback.

The issue is that sometimes i want to click it multiple times in a row to increment by 3 or 4 so i click on the “Next” button repeatedly.

I basically want some throttle so until kick off the ajax call if you haven’t got a “Next” button click in the last 1 second or something like that.

This way, if i click on it multiple times really fast, it will only fire off the ajax call on the last value.

What is the best way of doing this?

Answer 1

Something like this should do the trick:

var timer;
$('selector').on('click', function (){
    if (timer) {
        clearTimeout(timer);
    }

    timer = setTimeout(function () {
        // ajax call
    }, lengthofdelay);
});