Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use jQuery Deferred with custom events?

Tags:

I have two abstracted processes (e.g. managed within js objects using the revealing module pattern that do not expose their internals) that fire custom events when they complete. I want to perform an action when both custom events have fired.

The new Deferred logic in jQuery 1.5 seems like it would be an ideal way to manage this, except that the when() method takes Deferred objects that return a promise() (or normal js objects, but then when() completes immediately instead of waiting, which is useless to me).

Ideally I would like to do something like:

//execute when both customevent1 and customevent2 have been fired $.when('customevent1 customevent2').done(function(){   //do something }); 

What would be the best way to marry these two techniques?

like image 788
Adam Flynn Avatar asked Feb 15 '11 20:02

Adam Flynn


People also ask

Can jQuery be deferred?

This JQuery. Deferred() method in JQuery is a function which returns the utility object with methods which can register multiple callbacks to queues. It calls the callback queues, and relay the success or failure state of any synchronous or asynchronous function.

What is deferred () used for?

Deferred() method. It can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. The Deferred object is chainable, similar to the way a jQuery object is chainable, but it has its own methods.

Does jQuery remove unbind events?

jQuery unbind() Method The unbind() method removes event handlers from selected elements. This method can remove all or selected event handlers, or stop specified functions from running when the event occurs.

What is deferred resolve in jQuery?

resolve() method in JQuery is used to resolve a Deferred object and call any doneCallbacks with the given arguments. Syntax: deferred.resolve([args]) Parameters: args: This is optional parameters and is arguments which are passed to the doneCallbacks.


2 Answers

http://jsfiddle.net/ch47n/

I created a small plugin that creates a new jQuery.fn.when method.

Syntax is:

jQuery( "whatever" ).when( "event1 event2..." ).done( callback ); 

It uses jQuery.when() extensively internally and ensures that all events have been triggered on all elements in the collection before resolving.


Actual plugin code below:

( function( $ ) {      $.fn.when = function( events ) {          var deferred, $element, elemIndex, eventIndex;          // Get the list of events         events = events.split( /\s+/g );          // We will store one deferred per event and per element         var deferreds = [];          // For each element         for( elemIndex = 0; elemIndex < this.length; elemIndex++ ) {             $element = $( this[ elemIndex ] );             // For each event             for ( eventIndex = 0; eventIndex < events.length; eventIndex++ ) {                 // Store a Deferred...                 deferreds.push(( deferred = $.Deferred() ));                 // ... that is resolved when the event is fired on this element                 $element.one( events[ eventIndex ], deferred.resolve );             }         }          // Return a promise resolved once all events fired on all elements         return $.when.apply( null, deferreds );     };  } )( jQuery ); 
like image 178
Julian Aubourg Avatar answered Sep 20 '22 15:09

Julian Aubourg


You can have the event handlers for "customevent1" and "customevent2" each signal a "Deferred" instance when they fire. You can use "$.when()" then to combine those two into one, and that's where you put the handler to fire only after both custom events have fired.

var df1 = $.Deferred(), df2 = $.Deferred(); $('whatever').bind('customevent1', function() {   // code code code   df1.resolve(); }).bind('customevent2', function() {   // code code code   df2.resolve(); });  var whenBoth = $.when(df1, df2);  whenBoth.then(function() {   // code to run after both "customevent1"   // and "customevent2" have fired }); 

Old answer, here for completeness sake

You can make your own Deferred object that keeps track of the two conditions and fires "resolve" when both are set:

function watchEvents() {   var df = $.Deferred();    var flags = {};   $.each(Array.prototype.slice.call(arguments, 0), function() {     flags[this] = false;   });    var realResolve = df.resolve.bind(df);   df.resolve = function(eventName) {     flags[eventName] = true;     for (var ev in flags) if (flags[ev] === false) return;     realResolve();   };    return df; } 

Now you can call that function:

var df = watchEvents("customevent1", "customevent2"); 

And now your event handlers for those events just need to call "resolve" on that thing when they catch the events:

    df.resolve(event.type); 

Each handler reports its own type. Only when all of the event types requested when you called "watchEvents" have happened will the handler functions you register on "df" actually get called.

It occurs to me that another thing you could do would be to write a jQuery plugin that initializes a Deferred object for elements, and stores it in a ".data()" property. You could then write some more plugins that can be used by event handlers to signal themselves, and other plugins to register handlers for multi-event sequences. That'd be pretty cool, I think, but I need to spend some time pondering it.

like image 45
Pointy Avatar answered Sep 17 '22 15:09

Pointy