jQuery 传递一个包含Deferreds对象的数组给$.when()

在本文中，我们将介绍如何使用jQuery的 $.when()方法来传递一个包含Deferreds对象的数组。$ .when()方法是一个非常有用的方法，它可以用于等待多个异步操作完成后再执行某些任务。

阅读更多：jQuery 教程

什么是Deferreds对象？

在了解如何传递一个包含Deferreds对象的数组给$.when()之前，我们首先要了解什么是Deferreds对象。

Deferreds对象是jQuery中对异步操作的抽象，它代表一个尚未完成的操作。当一个操作被触发时，可以返回一个Deferreds对象，通过对该对象进行处理，我们可以设置操作完成后要执行的回调函数、成功回调函数、失败回调函数等。

Deferreds对象的操作包括：resolve()、reject()、notify()等。resolve()用于设置操作成功后的回调函数，reject()用于设置操作失败后的回调函数，notify()用于设置操作进行中的回调函数。

使用$.when()方法传递Deferreds对象的数组

$.when()方法可以接受一个或多个Deferreds对象作为参数，并等待所有的Deferreds对象都完成后执行回调函数。$

下面是一个简单的示例，展示了如何传递一个包含Deferreds对象的数组给.when()方法：

var deferred1 =  $.Deferred(); var deferred2 =$ .Deferred();
var deferred3 =  $.Deferred(); var deferredsArray = [deferred1, deferred2, deferred3];$ .when.apply($, deferredsArray).done(function() {
  console.log("所有的操作都完成了！");
}).fail(function() {
  console.log("至少有一个操作失败了！");
});

deferred1.resolve();
deferred2.resolve();
deferred3.resolve();

在上述示例中，我们创建了三个Deferreds对象，并将它们存储在一个数组中。然后，我们使用$.when()方法传递该数组作为参数，并通过done()和fail()方法分别设置了当所有操作完成和至少一个操作失败时要执行的回调函数。

最后，我们通过调用resolve()方法来触发各个Deferreds对象的操作完成状态。由于我们传递的数组中包含的所有Deferreds对象都已经被resolve()了，所以在控制台上会输出”所有的操作都完成了！”。

处理传递的参数

当我们传递一个包含Deferreds对象的数组给$.when()方法时，我们可以通过回调函数的参数来获取各个Deferreds对象的操作结果。传递给done()方法的参数是一个包含所有完成的Deferreds对象的结果的数组。

下面是一个示例，展示了如何处理传递的参数：

var deferred1 =  $.Deferred(); var deferred2 =$ .Deferred();
var deferred3 =  $.Deferred(); var deferredsArray = [deferred1, deferred2, deferred3];$ .when.apply($, deferredsArray).done(function(result1, result2, result3) {
  console.log("第一个操作的结果：" + result1);
  console.log("第二个操作的结果：" + result2);
  console.log("第三个操作的结果：" + result3);
});

deferred1.resolve("Hello");
deferred2.resolve("World");
deferred3.resolve("!");

// 控制台输出：
// 第一个操作的结果：Hello
// 第二个操作的结果：World
// 第三个操作的结果：!

在上述示例中，我们通过回调函数的参数result1、result2和result3分别获取了各个Deferreds对象的操作结果。通过调用resolve()方法来设置Deferreds对象的操作完成状态，并传递结果值作为参数。

同时处理多个异步操作

使用$.when()方法，我们可以同时处理多个异步操作，并在所有异步操作都完成后执行回调函数。

下面是一个示例，展示了如何同时处理多个异步操作：

var fetchData = function(url) {
  var deferred =  $.Deferred();$ .ajax({
    url: url,
    success: function(data) {
      deferred.resolve(data);
    },
    error: function() {
      deferred.reject();
    }
  });

  return deferred.promise();
};

var urls = ["url1", "url2", "url3"];

var deferredsArray = [];

 $.each(urls, function(index, url) { deferredsArray.push(fetchData(url)); });$ .when.apply($, deferredsArray).done(function(result1, result2, result3) {
  console.log("第一个异步操作的结果：" + result1);
  console.log("第二个异步操作的结果：" + result2);
  console.log("第三个异步操作的结果：" + result3);
});

// 控制台输出：
// 第一个异步操作的结果：url1的数据
// 第二个异步操作的结果：url2的数据
// 第三个异步操作的结果：url3的数据

在上述示例中，我们定义了一个fetchData()函数，用于通过ajax请求获取指定URL的数据。该函数返回一个Deferreds对象的promise()对象。

然后，我们定义了一个urls数组，包含了我们想要获取数据的URL。接着，我们使用 $.each()方法遍历urls数组，并将每个URL对应的fetchData()函数返回的Deferreds对象存储在deferredsArray数组中。$

最后，我们使用.when()方法传递deferredsArray数组作为参数，并通过done()方法获取各个异步操作的结果。