How to transfer all the handlers from one deferred to another?

Question

Let's say I have a $.Deferred and a jqXHR object. Is there a way to transfer all the handlers bound to the deferred (then, always, done, fail) over to the XHR object (which, as I understand it, is an extension of Deferred)?

---

Here's what I had in mind:

$.ajaxOne = function(options) {
    var xhr = null;
    return function() {
        if(xhr) xhr.abort();
        xhr = $.ajax(options).always(function() {
            xhr = null;
        });
    }
}

I wanted to create a function, similar to $.ajax, except that if you call it multiple times in rapid succession, it will abort the last request and only complete the most recent one. This is useful in many scenarios where you want to validate a user's input.

For example, you might want to check if a username is taken, but if they start typing in the username field again after you've started your ajax call, you don't care about the last result, only the most recent one.

Also, I don't think requests are guaranteed to return in the same order they went out (I suppose depending on your server setup), so you could have a syncing issue as well.

Anyway, the problem with the above code is that because it returns a function, you can execute your ajax call whenever you like, but you can't bind your completion handlers to it. So I have to somehow mix the deferred handlers in and rebind them to the XHR object.

Answer 1

Let's say I have a $.Deferred and a jqXHR object. Is there a way to transfer all the handlers bound to the deferred (then, always, done, fail) over to the XHR object (which, as I understand it, is an extension of Deferred)?

More or less, yes, but not in the way you expected. Instead of "moving handlers", you just resolve the deferred (that has the handlers) with the XHR deferred. This will make the deferred adopt the state of the ajax promise - or not, since jQuery is not Promise A+-compatible. So you will need to put the triggers as handlers manually:

var deferred = $.Deferred(),
    xhr = $.ajax(…);
xhr.done(deferred.resolve).fail(deferred.reject).progress(deferred.notify);

However, a use like that is discouraged, just use xhr wherever you needed deferred - they're equal. Or use xhr.then() to create a brand new promise object that resolves exactly like xhr will.

Anyway, the problem with the above code is that because it returns a function, you can execute your ajax call whenever you like, but you can't bind your completion handlers to it. So I have to somehow mix the deferred handlers in and rebind them to the XHR object.

You still can return each xhr object from that returned function, and bind your handlers to that. In case it is aborted, its error handlers will be called.

$.ajaxOne = function(options) {
    var xhr = null;
    return function(name) {
        options.data = name;
        if (xhr) xhr.abort();
        return xhr = $.ajax(options).always(function() {
//      ^^^^^^
            xhr = null;
        });
    }
}
var checkUserAccount = $.ajaxOne({…});
$input.keyup(function(e) {
    checkUser(this.value).done(function(ajaxResult) {
        // do anything here with the ajaxResult from the latest call
        // if there was another keyup event, this callback never fires
    });
});

Also, I don't think requests are guaranteed to return in the same order they went out (I suppose depending on your server setup), so you could have a syncing issue as well.

Not if you call abort on each old one when the function is called again - that will hold the invariant that there is only at most one active ajax request at a time.

I wanted to create a function, similar to $.ajax, except that if you call it multiple times in rapid succession, it will abort the last request and only complete the most recent one.

Sounds pretty much like an event stream. You will want to have a look at Functional Reactive Programming!

Answer 2

Came up with this:

function AjaxOne(options) {
    this.options = options;
    this._xhr = null;
    this._always = [];
    this._success = [];
    this._fail = [];
};

$.extend(AjaxOne.prototype, {
    always: function(cb) {
        this._always.push(cb);
        return this;
    },
    done: function(cb) {
        this._success.push(cb);
        return this;
    },
    fail: function(cb) {
        this._fail.push(cb);
        return this;
    },
    then: function(success, fail) {
        this._success.push(success);
        this._fail.push(fail);
        return this;
    },
    run: function(options) {
        if(this._xhr) {
            this._xhr.abort();
        }
        this._xhr = $.ajax($.extend({},options,this.options,{context:this}))
            .always(function() {
                this._xhr = null;
                for(var i=0; i<this._always.length;++i) this._always[i].apply(this,arguments);
            })
            .done(function() {
                for(var i=0; i<this._success.length;++i) this._success[i].apply(this,arguments);
            })
            .fail(function() {
                for(var i=0; i<this._fail.length;++i) this._fail[i].apply(this,arguments);
            });
    }
});

Seems to be working pretty well so far.... but it doesn't answer my original question.

So a comprehensive answer would be: you can't copy the callbacks from one deferred to another. I tried making copies of the deferred in various ways, $.extend({}, myDeferred) I couldn't get anything to work. I think you have to manually make copies of each method and fire off the appropriate callbacks, similar to what I've done.

You can propogate the callbacks off to the original deferred as Arun suggests in his comment (although I think his syntax is slightly off; according to the docs you don't need the .apply in there; the purpose of the 'with' methods is to allow you to set a context). In my case I wanted to be able to fire the methods more than once, so that doesn't work for my scenario.

Answer 3

Fiddle here.

I have implemented without using deferred objects.

The keyup Event -

$("#uID").keyup(function () {
    console.log("KeyUp")
    var textElement = this;
    clearTimeout(textElement.timer);
    if(textElement.xhrReq && textElement.xhrReq.abort){
        textElement.xhrReq.abort();
    }
    textElement.timer = setTimeout(function(){
        console.log("Invoking validation : " + textElement.value);
        validateUID(textElement);
    }, 1000);
});

In validateUID(), I have assigned the entire XHR object to the input element's property -

textElement.xhrReq = $.ajax({
...
});

One drawback - and I admit it's there - we need to keep the entire XHR object in the element.