jQuery метод $.when()

Определение и применение

jQuery метод $.when() предоставляет способ выполнения функций обратного вызова на основе нуля или более объектов, имеющих метод .then(), как правило, объекты Deferred, которые представляют асинхронные события.

jQuery синтаксис:

Синтаксис 1.5:

JavaScript
$.when()
$.when( deferreds )

deferreds - Deferred, или Promise, или любой объект, который имеет метод .then().

Если аргументы не передаются методу $.when(), то в этом случае он возвращает объект Promise с состоянием resolved (успешное выполнение):

JavaScript
$.when().then(function() {
  console.log( "обработчик .then() будет вызван асинхронно" );
});

Если методу $.when() передается один объект Deferred, то его объект Promise будет возвращен методом. Дополнительные методы объекта Promise можно вызвать для присоединения обратных вызовов, например, такие как метод .then().

В том случае, когда методу $.when() передается несколько объектов, метод возвращает объект Promise из нового "главного" отложенного (Deferred) объекта, который отслеживает агрегированное состояние всех переданных объектов. Метод переведет "главный" отложенный объект в состояние resolved (успешное выполнение) в том случае, если все переданные объекты перейдут в это состояние, или переведет "главный" отложенный объект в состояние rejected (выполнение отклонено), если хотя бы один переданный объект получит это состояние. Если "главный" отложенный объект перешел в состояние resolved (успешное выполнение), то все, присоединенные функции обратного вызова (doneCallbacks) будут вызваны. Аргументы, передаваемые этим функциям соответствуют значениям каждого отложенного объекта, переведенного в состояние resolved (успешное выполнение) и соответствует порядку объектов, переданному методу $.when():

JavaScript
// создаем два объекта Deferred
let def1 = $.Deferred();
let def2 = $.Deferred();

$.when( def1, def2 ).done(function ( first, second ) {
	console.log( first ); // выводит в консоль "Im first"
	console.log( second ); // выводит в консоль  "Im second"
});

def2.resolve( "Im second" ); // изменяем состояние объекта Deferred на resolved и передаем значение
def1.resolve( "Im first" ); // изменяем состояние объекта Deferred на resolved и передаем значение

Добавлен в версии jQuery

1.5

Значения параметров

Параметр Описание
deferreds Ноль или более объектов Deferred, или Promise, или любых объектов, которые имеют метод .then().

Пример использования

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery метода $.when()</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $.when(
          $.get("https://jsonplaceholder.typicode.com/todos/1"), // пытаемся загрузить данные с сервера с помощью HTTP запроса методом GET
          $.get("https://jsonplaceholder.typicode.com/todos/2"),
        ) // пытаемся загрузить данные с сервера с помощью HTTP запроса методом GET
          .then(
            function (a, b) {
              // добавляем обработчик при удачном выполнении запроса
              console.log(a[0].title); // выводим в консоль часть информации из полученного массива
              console.log(b[0].title); // выводим в консоль часть информации из полученного массива
            },
            function () {
              // добавляем обработчик при отклонении  запроса
              console.log("что-то пошло не так"); // выводим в консоль текстовую информацию
            },
          );
      });
    </script>
  </head>
  <body> </body>
</html>

В этом примере с использованием jQuery метода $.when() мы отслеживаем выполнение двух функций $.get() с помощью которых мы пытаемся загрузить данные с сервера с помощью HTTP запроса методом GET.

В случае успешной загрузки данных (состояние обоих объектов изменится на resolved) будет вызвана функция обратного вызова (doneCallback) метода .then(), которая выведет в консоль часть полученной информации.

В том случае, если по каким-то причинам состояние одного из объекта изменится на rejected (выполнение отклонено), то будет вызвана функция обратного вызова (failCallback) метода .then() (второй параметр), которая выведет в консоль текстовую информацию.

Результат примера (состояние обоих объектов изменилось на resolved):

Пример использования jQuery метода $.when()
Пример использования jQuery метода $.when()