jQuery функция $.Deferred()

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

jQuery фабричная функция $.Deferred() возвращает специальный объект с методами регистрации нескольких обратных вызовов в очереди обратного вызова, вызывает очереди обратного вызова и передает состояние "success" или "failure" любой синхронной или асинхронной функции. Другими словами фабричная функция $.Deferred() создает экземпляр объекта Deferred.

Объект Deferred создается в состоянии ожидания ("pending"). Любые обратные вызовы, добавленные к объекту с помощью методов deferred.then(), deferred.always(), deferred.done(), или deferred.fail() помещаются в очередь для последующего выполнения. Вызов методов deferred.resolve() или deferred.resolveWith() переводят объект Deferred в состояние resolve (успешное выполнение) и вызывает любые, предназначенные для подобных ситуаций функции обратного вызова (doneCallbacks) с заданными аргументами.

Вызов deferred.reject() или deferred.rejectWith() переводят объект Deferred в отклоненное состояние rejected (выполнение отклонено) и вызывает любые, предназначенные для подобных ситуаций функции обратного вызова (failCallbacks) с заданными аргументами. Как только объект изменил свое состояние на resolved (успешное выполнение) или rejected (выполнение отклонено), то он остается в этом состоянии. Обратные вызовы по прежнему могут быть добавлены к подобным объектам, но они будут выполняться немедленно.

jQuery синтаксис:

Синтаксис 1.5:
// без параметра
let myDeferredObject = $.Deferred()

// с указанием функции
let myDeferredObject = $.Deferred( beforeStart )

beforeStart - Function( Deferred deferred )

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

1.5

Значение параметра

Параметр	Описание
beforeStart	Функция, которая вызывается непосредственно перед возвращением из конструктора объекта. Новый отложенный объект будет доступен как по this, так и в качестве первого аргумента функции. Вызываемая функция может присоединять обратные вызовы, например с помощью метода deferred.then().

Параметр

Описание

beforeStart

Функция, которая вызывается непосредственно перед возвращением из конструктора объекта. Новый отложенный объект будет доступен как по this, так и в качестве первого аргумента функции. Вызываемая функция может присоединять обратные вызовы, например с помощью метода deferred.then().

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование фабричной функции $.Deferred()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  let dfd  = $.Deferred(); // создаем объект Deferred
 	 
	  dfd.then( ( val ) => val * 10, // функция, которая вызывается при изменении состояния объекта Deffered на resolved
	            ( val ) => val / 10 ) // функция, которая вызывается при изменении состояния объекта Deffered на rejected
	     .then( ( val ) => $( "p" ).html( val ) ) // добавляем отфильтрованное содержимое в элемент <p>
	     .then( () => console.log( dfd.state() ) ); // выводим в консоль текущее состояние выполнения объекта Deffered
		
	  $( ".resolve" ).click(function(){ // задаем функцию при нажатиии на элемент с классом .resolve
	    dfd.resolve( 100 ); // изменяем состояние объекта Deffered на resolve и передаем значение
	  });
	  $( ".reject" ).click(function(){ // задаем функцию при нажатиии на элемент с классом .reject
	    dfd.reject( 100 ); // изменяем состояние объекта Deffered на reject и передаем значение
	  });
	});
		</script>
	</head>
	<body>
		<button class = "resolve">Resolve</button>
		<button class = "reject">Reject</button>
		<button onclick = window.location.reload()>Page reload</button>
	</body>
</html>

В этом примере мы инициализируем переменную, которая содержит объект Deffered, созданный с помощью фабричной функции $.Deferred().

При нажатии на определенный элемент <button>, благодаря установленному обработчику событий "click" на элементе мы в первом случае с помощью метода .resolve() изменяем состояние объекта Deffered на resolved (успешное выполнение) и передаем числовое значение 100, а во втором случае с помощью метода .reject() изменяем состояние объекта Deffered на rejected (выполнение отклонено) и передаем тоже значение.

С помощью первого вызова метода .then() на объекте Deffered мы устанавливаем два фильтра, первый из них (doneFilter) определяет функцию, которая вызывается при изменении состояния объекта Deffered на resolved (успешное выполнение), а второй (failFilter) определяет функцию, которая вызывается при изменении состояния объекта Deffered на rejected (выполнение отклонено). При успешном выполнении (resolved) переданное значение будет умножено на 10, а при отклонении выполнения (rejected) значение будет поделено на 10. Обратите внимание, что мы используем стрелочные функции, они позволяют сделать код более компактным и читаемым.

После этого с помощью следующего вызова метода .then() мы с помощью метода .html() добавляем полученное значение в элемент <p>, и следующим вызовом метода .then() с помощью метода .state() объекта Deffered выводим в консоль текущее состояние выполнения объекта Deffered.

Результат примера:

Пример использования фабричной функции $.Deferred() и фильтрации значения методом .then()

jQuery объект Deferred