La forma en que funciona una devolución de llamada diferida es que cada vez que se agrega una devolución de llamada, esa devolución de llamada se inserta en una matriz. Luego, cuando se llama al método .resolve()
o .resolveWith()
en el objeto diferido, todas las devoluciones de llamada .done()
en la matriz se ejecutan en orden.
Ahora podemos ver qué es un objeto diferido. Tome el siguiente fragmento como ejemplo.
var deferred = $.Deferred();
var promise = deferred.promise();
Lo que tenemos ahora es un objeto diferido y el objeto promesa del objeto diferido. El objeto Diferido tiene todos los mismos métodos que el objeto promesa, sin embargo, el objeto promesa solo tiene los métodos .done()
, .fail()
y .always()
que se usan para agregar devoluciones de llamada al objeto diferido para cada event
respectivo. El objeto diferido, por otro lado, tiene varios otros métodos, lo más importante es .resolve()
y .reject()
. Cuando se llama a estos métodos en el objeto diferido, se llaman todas las devoluciones de llamada. .resolve()
dispara las devoluciones de llamada .done()
y .always()
, mientras que el método .reject()
llama a las devoluciones de llamada .fail()
y .always()
.
Generalmente, el objeto diferido se mantiene oculto dentro de un ámbito privado, y el objeto de promesa se devuelve desde la función para que se puedan colocar devoluciones de llamada en él. El objeto diferido se resolverá más adelante, como después de completar una solicitud ajax o después de cargar una imagen, después de un setTimeout, etc. También es importante darse cuenta de que un objeto diferido solo se puede resolver una vez. Si ya está resuelto, las devoluciones de llamada se llamarán de inmediato.
Aquí hay otro ejemplo, uno que uso:
function loadImage(url) {
var def = $.Deferred(),
img = new Image();
$(img).on("load error",function(e){
if (e.type === "error") {
def.reject(url);
}
else {
def.resolve(url);
}
});
img.src = url;
// return the promise object so that callbacks can
// be defined on the deferred object.
return def.promise();
}
loadImage("foobar.jpg").done(function(){
alert("The image is loaded!");
}).fail(function(){
alert("The image failed to load!");
}).always(function(){
alert("This is always called!");
});
Para obtener más información sobre el método jQuery $.Deferred()
y los objetos diferidos, visite enlace