O que são objetos adiados?

121

O jQuery 1.5 adiciona "objetos adiados". O que são e o que exatamente eles fazem?

Mohammad Ali Akbari
fonte

Respostas:

101

Objeto diferido

No jQuery 1.5, o objeto Adiado fornece uma maneira de registrar vários retornos de chamada em filas de retorno de chamada autogerenciadas, chamar filas de retorno de chamada conforme apropriado e retransmitir o estado de sucesso ou falha de qualquer função síncrona ou assíncrona.

Métodos diferidos:

  • deferred.done ()
    • Adicione manipuladores a serem chamados quando o objeto Adiado for resolvido.
  • deferred.fail ()
    • Adicione manipuladores a serem chamados quando o objeto Adiado for rejeitado.
  • deferred.isRejected ()
    • Determine se um objeto adiado foi rejeitado.
  • deferred.isResolved ()
    • Determine se um objeto adiado foi resolvido.
  • deferred.reject ()
    • Rejeite um objeto Adiado e chame qualquer failCallbacks com os argumentos especificados.
  • deferred.rejectWith ()
    • Rejeite um objeto Adiado e chame qualquer failCallbacks com o contexto e os argumentos especificados.
  • deferred.resolve ()
    • Resolva um objeto Adiado e chame qualquer doneCallbacks com os argumentos especificados.
  • deferred.resolveWith ()
    • Resolva um objeto Adiado e chame qualquer doneCallbacks com o contexto e os argumentos especificados.
  • deferred.then ()
    • Adicione manipuladores a serem chamados quando o objeto Adiado for resolvido ou rejeitado.

Adiado em ação:

$.get("test.php").done(
    function(){ alert("$.get succeeded"); }
);

$.get("test.php")
    .done(function(){ alert("$.get succeeded"); })
    .fail(function(){ alert("$.get failed!"); });

E parece que os retornos de chamada do método ajax () existentes podem ser encadeados em vez de declarados nas configurações:

var jqxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

Exemplo de trabalho da postagem no blog de Eric Hynds : http://jsfiddle.net/ehynds/Mrqf8/


jqXHR

A partir do jQuery 1.5, o método $ .ajax () retorna o objeto jXHR, que é um superconjunto do objeto XMLHTTPRequest. Para obter mais informações, consulte a seção jXHR da entrada $ .ajax


A partir do JQUERY 1.5 LANÇADO :

OBJETOS DIFERIDOS

Juntamente com a reescrita do módulo Ajax, um novo recurso foi introduzido, que também foi disponibilizado ao público: Objetos Adiados . Essa API permite trabalhar com valores de retorno que podem não estar presentes imediatamente (como o resultado do retorno de uma solicitação Ajax assíncrona). Além disso, permite anexar vários manipuladores de eventos (algo que antes não era possível na API do Ajax).

Além disso, você pode criar seus próprios objetos adiados usando o jQuery.Deferred exposto. Mais informações sobre essa API podem ser encontradas na documentação do objeto adiado.

Eric Hynds escreveu um bom tutorial sobre o uso de adiados no jQuery 1.5 .

caçador
fonte
19
Por favor, explique mais. Como faço para criar meus próprios objetos adiados personalizados. Como eles funcionam?
User113716
3
Na verdade, estou falando sério. Essa é uma boa pergunta sobre um novo recurso. Não tenho ideia de como eles funcionam, e acho que seria bom se o StackOverflow tivesse essa pergunta bem explicada para quem vai perguntar sobre isso no futuro.
user113716
1
atualizações: acho que a definição de "adiado" acima, que eu adicionei na parte superior, fornece uma visão mais clara do que está realmente fazendo. Parece ser mais capaz de encadear retornos de chamada em vez de precisar declará-los nas configurações passadas para uma função.
hunter
1
@ Hunter também gostaria de uma explicação de como funciona. Esta é a primeira pergunta, portanto, faça uma boa resposta!
Raynos
2
existem alguns benefícios importantes: ser capaz de abstrair o resultado de uma possível tarefa assíncrona, a capacidade de vincular vários manipuladores de tipos diferentes, vincular manipuladores a uma tarefa mesmo após a tarefa ter sido resolvida, vincular o resultado de várias solicitações assíncronas juntos, adicione condicionalmente manipuladores etc.
ehynds
13

Em vez de dizer o que faz, mostrarei o que faz e explicarei.

Uma cópia da fonte relacionada do jQuery 1.5 com anotações explicando o que está fazendo. Eu acho que os comentários estão corretos.

Isso pode ser benéfico

// promiseMethods. These are the methods you get when you ask for a promise.
// A promise is a "read-only" version
// fullMethods = "then done fail resolve resolveWith reject rejectWith isResolve    isRejected promise cancel".split(" ")
// As you can see it removes resolve/reject so you can't actaully trigger a
// anything on the deferred object, only process callbacks when it "finishes".
promiseMethods = "then done fail isResolved isRejected promise".split(" "),

// Create a simple deferred (one callbacks list)
/* Class: _Deferred.
 *  methods: done, resolve, resolveWith, isResolved
 *  internal method: cancel
 *
 *  Basically allows you to attach callbacks with the done method.
 *  Then resolve the deferred action whenever you want with an argument.
 *  All the callbacks added with done will be called with the resolved argument
 *  Any callbacks attached after resolvement will fire immediatly.
 *
 *  resolveWith allows you to set the this scope in the callbacks fired.
 *
 *  isResolved just checks whether it's resolved yet.
 *
 *  cancel blocks resolve/resolveWith from firing. the methods added throug
 *  done will never be called
 */
_Deferred: function () {
    var // callbacks list
    callbacks = [],
        // stored [ context , args ]
        // stores the context & args that .resolve was called with
        fired,
        // to avoid firing when already doing so
        firing,
        // flag to know if the deferred has been cancelled
        // in Deferred cancel gets called after the first resolve call
        cancelled,
        // the deferred itself
        deferred = {

            // done( f1, f2, ...)
            done: function () {
                if (!cancelled) {
                    var args = arguments,
                        i, length,
                        // elem in callback list
                        elem,
                        // type of elem in callback list
                        type,
                        // cached context & args for when done is called
                        // after resolve has been
                        _fired;
                    // If resolve has been called already
                    if (fired) {
                        // mark it locally
                        _fired = fired;
                        // set fired to 0. This is neccesary to handle
                        // how done deals with arrays recursively
                        // only the original .done call handles fired
                        // any that unwrap arrays and call recursively
                        // dont handle the fired.
                        fired = 0;
                    }
                    // for each function append it to the callback list
                    for (i = 0, length = args.length; i < length; i++) {
                        elem = args[i];
                        type = jQuery.type(elem);
                        // if argument is an array then call done recursively
                        // effectively unwraps the array
                        if (type === "array") {
                            // def.done([f1, f2, f3]) goes to
                            // def.done(f1, f2, f3) through the apply
                            deferred.done.apply(deferred, elem);
                        } else if (type === "function") {
                            // if its a function add it to the callbacks
                            callbacks.push(elem);
                        }
                    }
                    // if it's already been resolved then call resolveWith using
                    // the cahced context and arguments to call the callbacks
                    // immediatly
                    if (_fired) {
                        deferred.resolveWith(_fired[0], _fired[1]);
                    }
                }
                return this;
            },

            // resolve with given context and args
            resolveWith: function (context, args) {
                                // if its been cancelled then we can't resolve
                                // if it has fired then we can't fire again
                                // if it's currently firing then we can't fire. This check is
                // there because of the try finally block. It ensures we
                // cant call resolve between the try & finally in the catch phase.
                if (!cancelled && !fired && !firing) {
                    firing = 1;
                    // try block because your calling external callbacks
                    // made by the user which are not bugfree.
                                        // the finally block will always run no matter how bad
                                        // the internal code is.
                    try {
                        while (callbacks[0]) {
                            callbacks.shift().apply(context, args);
                        }
                                        // cache the content and arguments taht have been called
                                        // and set firing to false.
                    } finally {
                        fired = [context, args];
                        firing = 0;
                    }
                }
                return this;
            },

            // resolve with this as context and given arguments
            // just maps to resolveWith, this sets the this scope as normal
            // maps to this.promise which is the read only version of Deferred.
            resolve: function () {
                deferred.resolveWith(jQuery.isFunction(this.promise) ? this.promise() : 
this, arguments);
                return this;
            },

            // Has this deferred been resolved?
            // checks whether it's firing or if it has fired.
            isResolved: function () {
                return !!(firing || fired);
            },

            // Cancels the action. To be used internally
            cancel: function () {
                cancelled = 1;
                callbacks = [];
                return this;
            }
        };

    return deferred;
},
/* Class: Deferred.
 *  methods: then, done, fail, resolve, reject, resolveWith, rejectWith, isResolved, 
isRejected, promise
 *
 *  then is a shortcut for both assigning done & fail in one function.
 *
 *  This one has two underlying lists with different semantic meanings. You
 *  can bind to both the done callbacks and the fail callbacks then either
 *  resolve or reject your Deferred object.
 *
 *  You can check whether it has been resolved or rejected. useful to see
 *  Afterwards which one has happened.
 *
 *  Call .promise to return a new object which doesn't have the resolve/reject
 *  methods on it. This means you can only bind to it and not resolve/reject it.
 *  This is effectively read-only.
 *
 */
// Full fledged deferred (two callbacks list)
Deferred: function (func) {
        // the main deferred which deals with the success callbacks
    var deferred = jQuery._Deferred(),
                // the failure deferred which deals with the rejected callbacks
        failDeferred = jQuery._Deferred(),
                // the read only promise is cached.
        promise;
    // Add errorDeferred methods, then and promise
    jQuery.extend(deferred, {
                // def.then([f1, f2, ...], [g1, g2, ...] is a short hand for
                // def.done([f1, f2, ...])
        // def.fail([g1, g2, ...])
        then: function (doneCallbacks, failCallbacks) {
                        // fail exists here because this code will only run after
                        // deferred has been extended.
            deferred.done(doneCallbacks).fail(failCallbacks);
            return this;
        },
                // map def.fail to the second underlying deferred callback list
                // map all the other methods for rejection/failure to the underlying
                // failDeffered object so that Deferred has two callback lists stored
                // internally.
        fail: failDeferred.done,
        rejectWith: failDeferred.resolveWith,
        reject: failDeferred.resolve,
        isRejected: failDeferred.isResolved,
        // Get a promise for this deferred
        // If obj is provided, the promise aspect is added to the object
                // no clue what to do with "i"
        promise: function (obj, i /* internal */ ) {
                        // if no argument is passed then just extend promise
            if (obj == null) {
                                // if cached return the cache.
                if (promise) {
                    return promise;
                }
                                // set promise & arg to be {}
                promise = obj = {};
            }
                        // for each promiseMethods in the read only promise list
            i = promiseMethods.length;
            while (i--) {
                                // set the deferred method on the object
                obj[promiseMethods[i]] = deferred[promiseMethods[i]];
            }
                        // returns the "read-only" deferred without
                        // resolve, resolveWith, reject & rejectWith.
                        // So you cant "resolve" it but only add "done" functions
            return obj;
        }
    });
    // Make sure only one callback list will be used
        // if either resolve or reject is called cancel both.
        // this means that the one that has been called cant be called again
        // and the other one will never be called. So only the done or the fail
        // methods will ever be called
    deferred.then(failDeferred.cancel, deferred.cancel);
        // Don't mess with cancel!
    // Unexpose cancel
    delete deferred.cancel;
    // Call given func if any
        // function argument to be called. This was passed in. Allows you to
        // handle the deferred object after creating a new one, both as this scope
        // and as a new argument.
    if (func) {
        func.call(deferred, deferred);
    }
    return deferred;
},

/* Method: when
 * Arguments: none OR 1 of type(any & !deferred) OR n of type(deferred).
 *
 * If no arguments are passed then it gets resolved immediatly. A good way to
 * call multiple callback functions? Don't really know a good use of $.when()
 *
 * If one argument is passed and its not a deferred object then it resolves
 * immediatly and passes that argument to all the done callbacks attached.
 *
 * if n arguments are passed of type deferred object then the the done callbacks
 * will only fire if all of them succeed. If a single one fails then the
 * fail callbacks fire.
 *
 * Returns a promise read-only deferred object
 */
// Deferred helper
when: function (object) {
    var args = arguments,
        length = args.length,
                // If you pass in a deferred object then set deferred to be the promise
        // if you pass in anything else then set deferred to be a new deferred
        deferred = length <= 1 && object && jQuery.isFunction(object.promise) ?
                object :
                        jQuery.Deferred(),
        // cache the promise
        promise = deferred.promise(),
                // store an array
        resolveArray;

        // if multiple objects are passed in
    if (length > 1) {
                // create an arrey to store of values.
        resolveArray = new Array(length);
                // for each object that we wait on
        jQuery.each(args, function (index, element) {
                        // when that object resolves then
            jQuery.when(element).then(function (value) {
                                // store value in the array or store an array of values in it
                resolveArray[index] = arguments.length > 1 ? slice.call(arguments, 0) : 
value;
                                // if length === 1 then we finished calling them all
                if (!--length) {
                                        // resolve the deferred object with the read only promise
                                        // as context and the resolved values array as the argument
                    deferred.resolveWith(promise, resolveArray);
                }
                        // if any fail then we reject or deferred
            }, deferred.reject);
        });
        // if deferred was newly created but there was only one argument then
    // resolve it immediatly with the argument.
    } else if (deferred !== object) {
        deferred.resolve(object);
    }
        // return the read-only deferred.
    return promise;
},
Raynos
fonte
6
Isso iria ler muito mais agradável se você não tem uma barra de rolagem horizontal: /
gnarf
@gnarf Problem solved. Btw que é a fonte 1.5beta Eu acho que há algumas mudanças em 1.6
Raynos
9

Corrija-me se estiver errado, mas recentemente clicou para mim que é essencialmente um Executor de Tarefas Assíncronas. A promessa é um contrato de resultado, garantindo que você receba ... alguma coisa, mas sem garantia de quando a receberá.

George R
fonte
Então, apenas vinho velho em garrafa nova!
ankush981
3

Enquanto trabalhamos em Javascript, encontramos uma situação em que as chamadas de função são assíncronas. Esse é o fluxo da função de chamada (digamos X) não espera a função assíncrona chamada (digamos Y). Exemplo típico é quando fazemos chamadas para um servidor para buscar alguns dados de um banco de dados ou de uma página HTML. Se essas chamadas não forem assíncronas, a interface do usuário ficará bloqueada aguardando a resposta do servidor. Essa natureza assíncrona leva a um problema quando você deseja executar as coisas em uma ordem, por exemplo, deseja imprimir algo depois que Y (assíncrono) termina a execução ou busca de dados. Aqui, o jQuery nos fornece Objeto Defferido. Basicamente, o jQuery cuidou de todo o código padrão que normalmente escrevemos para resolver essa situação. Aqui está um exemplo simples:

  $.ajax({
      ...
  }).done(function(){
      //write here what you wish to do when this ajax call is success
  }).fail(function(){
      //write here what you wish to do on failure of this ajax call
  }); //see more on jQuery Deferred page

Você pode escrever sua própria função adiada (assíncrona)

function DoSomethingTimeConsumingAsynch(){
    var deferred = $.Deferred();

    _.defer(function(){ //I am using underscore, you can also use setTimeout
        ...  
        deferred.resolve();//When the process is done successfully 
        ...
        deferred.reject(); //When the process has failed
    });
    return deferred;
}

//HEre how to use your own asynch function
DoSomethingTimeConsumingAsynch()
.done(function(){
   //this will be invoked on success
})
.fail(function(){
   //this will be invoked on failure
})

Espero que isso tenha ajudado.

hadaytullah
fonte