Question

I have this jQuery event:

$('#button-next').bind('click', function() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: 'index.php?route=product/category/display&cat=any&limit='+p+',1',
        cache: false,
        success: function(data) {
            var text = data.output;
            goForward('scroller', text);
            p++;
        }
    });
});

That inserts a new item to the list and removes the last one. The problem is if the user starts clicking on the button so fast, it gets messed up. I need a way to prevent new calls before that last one is finished.

Answer 1

You could use the .one() method to subscribe to the click action:

$('#button-next').one('click', process);

where you could define the process function like this:

function process() {
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'index.php',
        cache: false,
        data: { 
            route: 'product/category/display', 
            cat: 'any', 
            limit: p + ',1' 
        },
        success: function(data) {
            var text = data.output;
            goForward('scroller', text);
            p++;
            // we rebind the click event once again
            $('#button-next').one('click', process);
        }
    });
}