jQuery метод $.when()

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

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

jQuery синтаксис:

Синтаксис 1.5:
$.when()
$.when( deferreds )

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

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

$.when().then(function() {
  console.log( "вызов произойдет немедленно" );
});

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

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

$.when( { test: "hello" } ).done(function( x ) {
    console.log( x.test ); // выводим в консоль hello
}).fail(function( x ) {
    console.log( "вызов никогда не произойдет" ); 
});

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

// создаем два объекта 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" ); // изменяем состояние объекта Deffered на resolved и передаем значение 
def1.resolve( "Im first" ); // изменяем состояние объекта Deffered на resolved и передаем значение

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

1.5

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода $.when()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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 объект Deferred