Debounce click on an AJAX link

Question

Is it possible to debounce the click of a link? If a user clicks too many times too fast on a pjax link it'll break the load of new content.

$(document).on('click', 'a[data-pjax]', loadNewContent);

var $target = $('main.content section.context'),
$fake = $('main.fake'),
$fakeContext = $('main.fake section.context');

function loadNewContent() {

    event.preventDefault();

    var $this = $(this),
    url = $this.attr('href');

    $fake.addClass('is--loading');

    $.pjax({
        url: url,
        fragment: 'body',
        container: $fakeContext
    });

    $fake.one(transitionEnd, function() {
        $target.html($fake.find('section.context').html());
        $fake.removeClass('is--loading');
        $fake.off(transitionEnd);
    });

}

Any thoughts? I tried this, but it stopped the loadNewContent from firing. (https://github.com/cowboy/jquery-throttle-debounce)

$(document).on('click', 'a[data-pjax]', $.debounce(1000, true, function() {
    loadNewContent();
}));

what if you set a flag to pending when triggered and set to done when response is received. — binariedMe, Mar 23 '17 at 14:20
@binariedMe Yes that sounds like it could work. Could you elaborate? — John the Painter, Mar 23 '17 at 14:21
what is this `$.debounce()` function ? did you write it or is it a plugin ? If you wrote it, please, provide the code, if not, tell us which plugin it is... — n00dl3, Mar 23 '17 at 14:31
@n00dl3 sorry it is https://github.com/cowboy/jquery-throttle-debounce will update question — John the Painter, Mar 23 '17 at 14:32

binariedMe · Accepted Answer · 2017-03-23T14:38:30.357

2

Something like this would work :

var callWaiting = false;
callAjax() {
  if(!callWaiting) {
    callWaiting = true;
    makeHttpCall(url, data, function(response) {callWaiting = false;});
    callWaiting = false;
  }
}

edited Mar 23 '17 at 14:38

answered Mar 23 '17 at 14:24

binariedMe

4,309
1
18
34

I've tried implementing this into my loadNewContent() but doesn't seem to help. – John the Painter Mar 23 '17 at 14:33
Where do you get response in your code for the call you are making? – binariedMe Mar 23 '17 at 14:36
BTW I have updated the logic. Hope that solves the issue – binariedMe Mar 23 '17 at 14:39
1

Ah yes. I think I understand now. Thanks! – John the Painter Mar 23 '17 at 14:43

Debounce click on an AJAX link

1 Answers1