jQuery trigger custom event synchronously?

Question

I am using the jQuery trigger method to call an event... but it behaves inconsistently. Sometimes it call the event, sometimes it does not.

<a href="#" onclick="
    $(this).trigger('custom-event');
    window.location.href = 'url';
    return false;
">text</a>

The custom-event has lots of listeners added to it. It is as if the trigger method is not synchronous, allowing the window.location.href be changed before executing the events. And when window.location.href is changed a navigation occurs, interrupting everything.

How can I trigger events synchronously?

Using jQuery 1.8.1.

EDIT

I have found that the event, when called has a stack trace like this:

1. jQuery.fx.tick (jquery-1.8.1.js:9021)
2. tick (jquery-1.8.1.js:8499)
3. jQuery.Callbacks.self.fireWith (jquery-1.8.1.js:1082)
4. jQuery.Callbacks.fire (jquery-1.8.1.js:974)
5. jQuery.speed.opt.complete (jquery-1.8.1.js:8991)
6. $.customEvent (myfile.js:28)

This proves that jQuery trigger method is asynchronous. (I was wrong... this only proves that the event I was calling, had an animation inside it, and was calling the expected function inside the callback after the animation)

Answer 1

You, my friend, are looking for jQuery "when".

http://api.jquery.com/jQuery.when/

To force anything to be synchronous, you can use something like this....

$.when($(this).trigger('custom-event')).done(function(){
    window.location.href = 'url';
});

Answer 2

Reading documentation about triggerHandler:

Instead of returning the jQuery object (to allow chaining), .triggerHandler() returns whatever value was returned by the last handler it caused to be executed. If no handlers re triggered, it returns undefined

This point in the documentation let me think that a code like this:

// Trigger the custom event
$(this).triggerHandler('custom-event');
// This code will only run when all events are run
window.location.href = 'url';

would meet your requirements.

See http://api.jquery.com/triggerHandler/