Closure, scope et ajax

Bonjour,

Désolé de vous embêter encore avec ça, mais je n'arrive pas à comprendre pourquoi je ne récupère pas les "bonnes" variables dans mon contexte...

J'utilise le "plugin" jQuery.ajaxQueue :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

(function($) { // jQuery on an empty object, we are going to use this as our Queue var ajaxQueue = $({}); $.ajaxQueue = function( ajaxOpts ) { var jqXHR, dfd = $.Deferred(), promise = dfd.promise(); // queue our ajax request // Ici, ajaxOpts est bien toujours Ok pour moi //(ie, ajaxOpts.url est effectivement bien différent à chaque appel, "url1", "url2","url3', etc) ajaxQueue.queue( doRequest ); // add the abort method promise.abort = function( statusText ) { // proxy abort to the jqXHR if it is active if ( jqXHR ) { return jqXHR.abort( statusText ); } // if there wasn't already a jqXHR we need to remove from queue var queue = ajaxQueue.queue(), index = $.inArray( doRequest, queue ); if ( index > -1 ) { queue.splice( index, 1 ); } // and then reject the deferred dfd.rejectWith( ajaxOpts.context || ajaxOpts, [ promise, statusText, "" ] ); return promise; }; // run the actual query /* Par contre, ici, ce n'est plus le cas, ajaxOpts.url est toujours la dernière du tableau (cf. SCRIPTS_JS plus loin) sauf pour le premier appel (ajaxOpts.url est bien égal à "url1" pour le premier appel, mais pour tous les autres appels, ajaxOpts.url est toujours égal au dernier élément du tableau) function doRequest( next ) { jqXHR = $.ajax( ajaxOpts ) .done( dfd.resolve ) .fail( dfd.reject ) .then( next, next ); } return promise; }; })(jQuery);

---

Tout fonctionne comme attendu, sauf si j'appelle $.ajaxQueue dans le cadre d'une boucle, ie (code simplifié) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var SCRIPTS_JS = new Array( url1,url2,url3,... )   for (var i=0;i<SCRIPTS_JS.length;i++) { jQuery.extend( optsAjax, // défini par ailleurs { url: SCRIPTS_JS[i] } ); $.ajaxQueue(optsAjax); // Lors de cet appel, optsAjax correspond bien toujours à ce qui est attendu (ie: l'url est bien la courante dans la boucle }

---

En fait je ne comprends pas où je "perds" le fil au niveau de $.ajaxQueue puisqu'il semble que la closure supérieure est correcte lors de l'appel initial mais plus correcte lors de l'exécution de "function doRequest( next )".

C'est sans aucun doute (encore :aie:) un problème de scope/closure, etc, et j'ai bien essayé d'implémenter les solutions données par ailleurs (fonctions anonyme, etc), mais je dois surement très mal m'y prendre...

Par exemple, j'ai essayé ça pour "contraindre" les variables dans la boucle :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

for (var i=0;i<SCRIPTS_JS.length;i++) { (function () { jQuery.extend( optsAjax, // défini par ailleurs { url: JSSCRIPTS_URL + SCRIPTS_JS[i] } ); $.ajaxQueue(optsAjax); // Lors de cet appel, optsAjax correspond bien toujours à ce qui est attendu (ie: l'url est bien la courante dans la boucle }()) }

---

Je sais que ce sujet a été abordé maintes fois sur ce forum (notamment ici http://www.developpez.net/forums/d13...ion-dynamique/) et par ailleurs, mais j'ai vainement essayé toutes les solutions trouvées...

Merci d'avance pour votre patience et vos éventuelles pistes de résolution.

Bonne journée

PS : Dans le cadre de plusieurs appels hors bloucle, tout fonctionne comme attendu, ie :

Code:

---

1 2 3 4 5

$.ajaxQueue({url:url1}); $.ajaxQueue({url:url2}); $.ajaxQueue({url:url3}); ...

---

Donc tout laisse à penser que c'est au niveau de l'appel de $.ajaxQueue(...) dans la boucle qu'il faudrait agir, mais où et comment ?

Merci encore

Je pense avoir trouver une réponse à l'aide de jQuery.each... L'appel devient :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

jQuery.each(SCRIPTS_JS, function() { _self=this; // utilise pour référencer les éléments de l'objet en cours pour les fonctions de callback (voir "success" ci-dessous) jQuery.extend( optsAjax, // défini par ailleurs { url: this, // "this" est encore l'objet "each" en cours ici ; ou "_self" ;) success: function () { // Attention "this" n'est plus un objet renvoyé par "each" à ce point (c'est un objet jqXHR), donc il faut utiliser la variable "_self" console.log('url : ' + _self); } ); $.ajaxQueue(optsAjax); // Cette fois le contexte est bien préservé });

---

Donc "each" fait le boulot pour "isoler" les variables en cours, mais la question reste posée pour le cas où on utiliserait pas jQuery...

Si quelqu'un à un exemple à donner hors utilisation de "each", je suis preneur ;)

Merci et bonne journée

Bonjour,

Ce que tu as loupé dans le topic précédent, c'est que ma solution implique de passer la variable que tu souhaites isoler en argument de la fonction anonyme (ici ton itérateur i)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

for (var i=0;i<SCRIPTS_JS.length;i++) { (function (_i) { jQuery.extend( optsAjax, // défini par ailleurs { url: JSSCRIPTS_URL + SCRIPTS_JS[_i] } ); $.ajaxQueue(optsAjax); // Lors de cet appel, optsAjax correspond bien toujours à ce qui est attendu (ie: l'url est bien la courante dans la boucle }(i)) }

---

Ce que fait $.each en passant en argument les éléments un par un à la fonction.

Bonjour,

Argh, effectivement, tu as 1000 fois raison... J'avais aussi essayé de passer l'élément du tableau à la fonction anonyme, mais pas l'itérateur seul, ie :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

for (var i=0;i<SCRIPTS_JS.length;i++) { (function (elem) { jQuery.extend( optsAjax, // défini par ailleurs { url: JSSCRIPTS_URL + elem } ); $.ajaxQueue(optsAjax); // Lors de cet appel, optsAjax correspond bien toujours à ce qui est attendu (ie: l'url est bien la courante dans la boucle }(SCRIPTS_JS[i])) }

---

Merci pour cette précision et bonne journée