14

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)

Improve this question

2 Answers 2

Reset to default
28

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';
});
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

In fact I was wrong... trigger is sychronous... the problem was that there was an effect running inside the triggered event, and the expected method was being called inside the callback.
The handler must return a Promise ;-)
Actually no. api.jquery.com/trigger shows that jQuery.trigger() returns the jQuery object in question, i.e. $(this); There is, as far as I can tell, no way to return a Promise to the event trigger call.
"If a single argument is passed to jQuery.when and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately." And trigger does not return such.
@RaúlFerràs Exactly. Using $.when is just plain wrong here.
|
11

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/

Improve this answer

3 Comments

Thats true... the problem with my code was ME. =) I didn't see at the moment of posting this question that there was UI effect inside the event, and that the code was only being called from the callback of that UI effect, instead of being call directly by the vent code.
Can you use this to trigger the handler of an event belonging to a separate iFrame? In other words, can I have iFrames communicating synchronously, and prevent further code from being processed until the response has returned?
@PerryMonschau I am pretty sure that javascript can not communicate as easilly with iframe. Take a look at serviceWorker (developer.mozilla.org/en-US/docs/Web/API/ServiceWorker) for inter-frame communications... Or manipulate the hash of the iFrame and watch the hash being modified back from the iframe. Or, go for a browser plugin... Anyway, AFAIK no easy solution...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.