jquery - happy clicker - looking for callback on bound event

Question

I'm binding some slightly complex functionality to a click event

$(someSelector)).bind('click', someFunction(a,b,c));

function somefunction(a,b,c) {
    return function() {
        // some logic
        $(anotherSelector).each(function() {
            // fade out with call back...
            $(this).fadeOut("fast", function() {
                // TODO: add callback here???
                $(contentSelector).fadeIn("fast");
            })
        })

    }
}

The problem is that a series of fast clicks results in inconsistent fadeOut / fadeIn behaviour. I'm assuming that new click events are processed before the current fadeIn is complete.

I think I'm looking for some callback mechanism that ensures that new clicks are processed after current clicks are finished. I could add a callback to fadeIn, but I don't see what I kind of logic would help me there...

I also read about unbinding components for as long as a click is processed (and later rebinding them), but again - I'm not sure on top of which logic I would put that.

Thanks for advice :)

If I'm understanding correctly, the .stop() function may be of some use to you: http://api.jquery.com/stop/ — Greg Pettit, Apr 09 '12 at 07:26
Thx, but stop() will simply cancel the ongoing animations - that's not what I'm looking for here — Jan Groth, Apr 09 '12 at 09:04

score 1 · Accepted Answer · edited May 23 '17 at 11:56

You could utilize jQuery's .on and .off methods:

$someElement = $(someSelector)
$someElement.on('click', someFunction(a, b, c));

function someFunction(a, b, c) {
  // detach the event handler
  $someElement.off('click', someFunction);

  /* useful stuff here */

  // reattach the event handler
  $someElement.on('click', someFunction(a, b, c));
}

where I have cached the jQuery element.

Alternatively, you could create a variable outside of the callback's scope, checking and setting it's value inside the callback:

$(someSelector)).bind('click', someFunction(a,b,c));

var isWaiting = false;
function somefunction(a,b,c) {
  if (!isWaiting) {
    isWaiting = true;

    /* useful stuff here */

    isWaiting = false;
  }
}

I would recommend the .on/.off approach as it deals more directly with the jQuery event binding process.

jquery - happy clicker - looking for callback on bound event

1 Answers1