Que fait $ .when.apply ($, someArray)?

Je lis des articles sur les différés et les promesses et je continue de paraître $.when.apply($, someArray). Je ne sais pas exactement ce que cela fait exactement, à la recherche d'une explication qu'une ligne fonctionne exactement (pas l'intégralité de l'extrait de code). Voici un peu de contexte:

var data = [1,2,3,4]; // the ids coming back from serviceA
var processItemsDeferred = [];

for(var i = 0; i < data.length; i++){
  processItemsDeferred.push(processItem(data[i]));
}

$.when.apply($, processItemsDeferred).then(everythingDone); 

function processItem(data) {
  var dfd = $.Deferred();
  console.log('called processItem');

  //in the real world, this would probably make an AJAX call.
  setTimeout(function() { dfd.resolve() }, 2000);    

  return dfd.promise();
}

function everythingDone(){
  console.log('processed all items');
}

.applyest utilisé pour appeler une fonction avec un tableau d'arguments. Il prend chaque élément du tableau et utilise chacun comme paramètre de la fonction. .applypeut également changer le contexte ( this) à l'intérieur d'une fonction.

Alors, prenons $.when. On a l'habitude de dire "quand toutes ces promesses sont résolues ... faites quelque chose". Il prend un nombre infini (variable) de paramètres.

Dans votre cas, vous avez un éventail de promesses; vous ne savez pas à combien de paramètres vous passez $.when. Passer le tableau lui-même $.whenne fonctionnerait pas, car il s'attend à ce que ses paramètres soient des promesses, pas un tableau.

C'est là .applyqu'intervient. Il prend le tableau, et appelle $.whenavec chaque élément comme paramètre (et s'assure que le thisest défini sur jQuery/ $), alors tout fonctionne :-)

$ .when prend n'importe quel nombre de paramètres et se résout lorsque tous ceux-ci sont résolus.

anyFunction .apply (thisValue, arrayParameters) appelle la fonction anyFunction en définissant son contexte (thisValue sera le this dans cet appel de fonction) et transmet tous les objets de arrayParameters en tant que paramètres individuels.

Par exemple:

$.when.apply($, [def1, def2])

Est le même que:

$.when(def1, def2)

Mais la manière d'appeler apply vous permet de passer un tableau de nombre inconnu de paramètres. (Dans votre code, vous dites que vos données proviennent d'un service, alors c'est la seule façon d'appeler $ .when )

Ici, le code entièrement documenté.

// 1. Declare an array of 4 elements
var data = [1,2,3,4]; // the ids coming back from serviceA
// 2. Declare an array of Deferred objects
var processItemsDeferred = [];

// 3. For each element of data, create a Deferred push push it to the array
for(var i = 0; i < data.length; i++){
  processItemsDeferred.push(processItem(data[i]));
}

// 4. WHEN ALL Deferred objects in the array are resolved THEN call the function
//    Note : same as $.when(processItemsDeferred[0], processItemsDeferred[1], ...).then(everythingDone);
$.when.apply($, processItemsDeferred).then(everythingDone); 

// 3.1. Function called by the loop to create a Deferred object (data is numeric)
function processItem(data) {
  // 3.1.1. Create the Deferred object and output some debug
  var dfd = $.Deferred();
  console.log('called processItem');

  // 3.1.2. After some timeout, resolve the current Deferred
  //in the real world, this would probably make an AJAX call.
  setTimeout(function() { dfd.resolve() }, 2000);    

  // 3.1.3. Return that Deferred (to be inserted into the array)
  return dfd.promise();
}

// 4.1. Function called when all deferred are resolved
function everythingDone(){
  // 4.1.1. Do some debug trace
  console.log('processed all items');
}

Malheureusement, je ne suis pas d'accord avec vous les gars.

$.when.apply($, processItemsDeferred).always(everythingDone);

Appellera everythingDonedès qu'un différé est rejeté , même s'il y a d'autres différés en attente .

Voici le script complet (je recommande http://jsfiddle.net/ ):

var data = [1,2,3,4]; // the ids coming back from serviceA
var processItemsDeferred = [];

for(var i = 0; i < data.length; i++){
  processItemsDeferred.push(processItem(data[i]));
}

processItemsDeferred.push($.Deferred().reject());
//processItemsDeferred.push($.Deferred().resolve());

$.when.apply($, processItemsDeferred).always(everythingDone); 

function processItem(data) {
  var dfd = $.Deferred();
  console.log('called processItem');

  //in the real world, this would probably make an AJAX call.
  setTimeout(function() { dfd.resolve(); }, 2000);    

  return dfd.promise();
}

function everythingDone(){
  alert('processed all items');
}

C'est un bug? Je voudrais utiliser ceci comme le monsieur ci-dessus l'a décrit.

Peut-être que quelqu'un peut trouver cela utile:

$.when.apply($, processItemsDeferred).then(everythingDone).fail(noGood);

EverythingDone n'est pas appelé en cas de rejet

$ .when seul permet à un callback d'être appelé lorsque toutes les promesses qui lui sont transmises sont résolues / rejetées. Normalement, $ .when prend un nombre variable d'arguments, utiliser .apply permet de lui passer un tableau d'arguments, c'est très puissant. Pour plus d'informations sur .apply: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply

Merci pour votre solution élégante:

var promise;

for(var i = 0; i < data.length; i++){
  promise = $.when(promise, processItem(data[i]));
}

promise.then(everythingDone);

Juste un point: lorsque vous utilisez resolveWithpour obtenir certains paramètres, cela se rompt à cause de la promesse initiale définie sur indéfinie. Ce que j'ai fait pour que ça marche:

// Start with an empty resolved promise - undefined does the same thing!
var promise;

for(var i = 0; i < data.length; i++){
  if(i==0) promise = processItem(data[i]);
  else promise = $.when(promise, processItem(data[i]));
}

promise.then(everythingDone);