如何在自定义事件中使用jQuery Deferred?(How to use jQuery Deferred with custom events?)

54 IT屋

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?

解决方案

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 );

我有两个抽象的过程(例如,使用不公开其内部结构的显示模块模式在js对象中进行管理)会触发自定义事件完成后。我想在两个自定义事件都触发时执行操作。



新的 Deferred 逻辑似乎是管理此问题的理想方法,只是when()方法采用了返回了promise()的Deferred对象(或普通js对象) ,但是when()立即完成而不是等待,这对我来说是没有用的。)



理想情况下,我想执行以下操作:



  //在同时触发customevent1和customevent2时执行
$ .when('customevent1 customevent2')。done(function(){
//做某事
});


结合这两种技术的最佳方法是什么?


< div class = h2_lin>解决方案

http://jsfiddle.net/ch47n/



我创建了一个小插件,该插件创建了一个新的jQuery.fn.when方法。



语法是:



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


它在内部广泛使用jQuery.when()并确保所有事件都已在其中的所有元素上触发






下面的实际插件代码:



 (function($){

$ .fn.when = function(events){

var deferred,$ element,elemIndex ,eventIndex;

//获取事件列表
events = events.split(/ \s + / g);

//我们将存储一个每个事件和每个元素的延迟
var deferreds = [];

//对于每个元素
for(elemIndex = 0; elemIndex< this.length; elemIndex ++){
$ element = $(this [elemIndex]);
//对于每个事件
for(eventIndex = 0; eventIndex< events.length; eventIndex ++){
//存储a延迟...
deferreds.push((deferred = $ .Deferred())) ;
// ...在此元素上触发事件时解析
$ element.one(events [eventIndex],deferred.resolve);
}
}

//返回在所有元素上触发的所有事件
都返回的promise返回$ .when.apply(null,deferreds);
};

})(jQuery);

本文地址:IT屋 » 如何在自定义事件中使用jQuery Deferred?