FAQ jQuery
FAQ jQueryConsultez toutes les FAQ
Nombre d'auteurs : 12, nombre de questions : 46, dernière mise à jour : 15 juin 2021
Sommaire→Les objets
[jQuery 1.6]
Les objets différés (Deferred object) sont un moyen utile pour structurer votre code.
Un objet différé est un objet :
- qui permet de chaîner les instructions ;
- qui peut prendre deux états (succès (done) ou échec (fail)) ;
- qui gère une file d'attente de fonctions de rappel (callback) pour chacun de ses états ;
- qui peut enregistrer plusieurs fonctions de rappel dans une file d'attente ;
- qui, lorsque son état est déterminé (succès ou échec), exécute dans l'ordre d'insertion, chacune des fonctions de rappel contenues dans la file d'attente correspondant à son état.
var objDif = $.Deferred(); : crée un objet différé.
objDif.done() : pour ajouter une fonction de rappel à la file d'attente qui sera appelée en cas de succès.
objDif.fail() : pour ajouter une fonction de rappel à la file d'attente qui sera appelée en cas d'échec.
objDif.always() : pour ajouter une fonction de rappel à la file d'attente qui sera toujours exécutée lorsque la promesse se réalisera par un succès ou par un échec.
objDif.then(doneCallback, failCallback) : pour ajouter une fonction ou un tableau (array) de fonctions aux files d'attente.
objDif.pipe( [ doneFilterFunction ], [ failFilterFunction ] ) : retourne une nouvelle promesse (un objet différé) qui filtre le statut et les valeurs de l'objet différé original au travers d'une fonction.
objDif.resolve(arguments) : passe l'objet différé dans l'état "succès" ce qui déclenche l'activation de la file d'attende correspondante.
objDif.reject(arguments) : passe l'objet différé dans l'état "échec" ce qui déclenche l'activation de la file d'attende correspondante.
$.when(objDif1, objDif2) : génère un objet différé pour gérer le résultat final d'un ensemble d'objets différés, voir l'exemple.
Exemple 1 : avec des objets différés globaux.
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<div id="conteneur">
<p>Un mot pour remplir</p>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(function(){
/*
* Cette fonction sera utilisée comme une fonction
* de rappel qui sera appelée en cas de succès.
*/
var funcDone = function(){
console.log("C'est un succès !", arguments);
};
/*
* Cette fonction sera utilisée comme une fonction
* de rappel qui sera appelée en cas d'échec.
*/
var funcFail = function(){
console.log("C'est un échec !", arguments);
};
/*
* Création de l'objet différé Test1.
*
* Dans la fonction de rappel de l'objet, on ajoute
* une fonction de rappel à la file d'attente des
* fonctions de rappel qui seront appelées en cas
* d'échec.
*
* Après la création de l'objet, on lui ajoute par
* la méthode then une ou plusieurs fonctions de
* rappel qui seront activées en cas de succès et
* une ou plusieurs fonctions de rappel qui seront
* activées en cas d'échec.
*
* La méthode then accepte, comme ici, une seule fonction
* ou un tableau (array) de fonctions.
*
* Les fonctions de rappel seront activées dans l'ordre
* de leur ajout à la file d'attente.
*/
var objDifTest1 = $.Deferred(function(){
console.log("L'objet différé objDifTest1 a été initialisé");
// fonction de rappel qui sera appelée en cas d'échec
this.fail(function(){
console.log("Zut !");
});
}).then(funcDone, funcFail);
// Création de l'objet différé Test2
var objDifTest2 = $.Deferred(function(){
console.log("L'objet différé objDifTest2 a été initialisé");
// fonction de rappel qui sera appelée en cas d'échec
this.fail(function(){
console.log("Zut !");
});
}).then(funcDone, funcFail);
/*
* Le Test1, on le termine par un succès en
* appelant la méthode resolve avec ou sans
* arguments.
*/
var funcTest1 = function(){
console.log("La fonction funcTest1 a été appelée");
objDifTest1.resolve("funcTest1", arguments);
};
/*
* Le Test2, on le termine par un échec en
* appelant la méthode reject avec ou sans
* arguments.
*/
var funcTest2 = function(){
console.log("La fonction funcTest2 a été appelée");
objDifTest2.reject("funcTest2", arguments);
};
/*
* On demande à l'objet différé objDifTest1 d'ajouter
* cette fonction de rappel à la file d'attente des
* fonctions qui seront appelées en cas de succès.
*/
objDifTest1.done(function(){
console.log("Yaisse !");
});
/*
* $.when() génère un objet différé, ce qui permet
* d'enchainer les instructions ici then.
*
* $.when() est utile pour gérer le résultat final d'un
* ensemble d'objets différés.
*/
$.when(objDifTest1, objDifTest2).then(
function(){
console.log("Le résultat final est un succès !", arguments);
},
function(){
console.log("Le résultat final est un échec !", arguments);
}
);
funcTest1("hello");
funcTest2("Oops");
/*
L'objet différé objDifTest1 a été initialisé
L'objet différé objDifTest2 a été initialisé
La fonction funcTest1 a été appelée
C'est un succès ! ["funcTest1", ["hello"]]
Yaisse !
La fonction funcTest2 a été appelée
Zut !
C'est un échec ! ["funcTest2", ["Oops"]]
Le résultat final est un échec ! ["funcTest2", ["Oops"]]
*/
});
</script>
</body>
</html>
Exemple 2 : avec des fonctions qui retournent un objet différé.
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<div id="conteneur">
<p>Un mot pour remplir</p>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(function(){
function test1(){
var objDif = $.Deferred();
if (String(arguments[0]).length > 5){
objDif.resolve("test1", arguments);
} else {
objDif.reject("test1", arguments);
}
// Retourne l'objet différé dans l'état "succès" ou "échec".
return objDif.promise();
}
function test2(){
var objDif = $.Deferred();
if (String(arguments[0]).length > 5){
objDif.resolve("test1", arguments);
} else {
objDif.reject("test1", arguments);
}
// Retourne l'objet différé dans l'état "succès" ou "échec".
return objDif.promise();
}
function test3(){
var objDif = $.Deferred();
// On oublie de fixer l'état de l'objet différé
return objDif.promise();
}
/*
* Important, voir les commentaires ci-dessous
*/
var objDifFinal = $.when(test1("Hello"), test2("Bonjour"));
objDifFinal.done(function(){
console.log("Le résultat final est un succès !", arguments);
});
objDifFinal.fail(function(){
console.log("Le résultat final est un échec !", arguments);
});
objDifFinal.always(function(){
console.log("L'objet différé objDifFinal a été créé !", arguments);
});
/*
* Pour : var objDif = $.when(test1("Hello"), test2("Bonjour"));
* Le résultat final est un échec ! ["test1", ["Hello"]]
*
* Pour : var objDifFinal = $.when(test1("Hello"), test2("Bonjour"), test3("Oops"));
* Le résultat final est un échec ! ["test1", ["Hello"]]
* Car quel que soit l'état du troisième objet différé, le
* résultat final sera un échec.
*
* Pour : var objDif = $.when(test1("Bonjour"), test2("Bonjour"), test3("Oops"));
* $.when() ne peut pas construire objDifFinal, car l'état du
* troisième objet différé n'est pas encore déterminé.
*/
});
</script>
</body>
</html>Mis à jour le 30 mai 2011 par danielhagnoul