jQuery метод .promise()

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

jQuery метод .promise() возвращает динамически сгенерированный объект Promise для наблюдения за завершением всех действий определенного типа, связанных с коллекцией jQuery, поставленных в очередь или нет. Объект изменяет свое состояние на resolved (успешное выполнение) после завершения всех действий определенного типа, связанных с коллекцией.

jQuery синтаксис:

Синтаксис 1.6:

 $( "selector" ).promise();
 $( "selector" ).promise( type );
 $( "selector" ).promise( type, target );

type - String
target - PlainObject

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

1.6

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

Параметр	Описание
type	Тип очереди за которой необходимо наблюдать. По умолчанию тип очереди соответствует значению "fx", что означает, что возвращаемый объект Promise изменяет свое состояние на resolved (успешное выполнение), когда все анимации выбранных элементов завершены.
target	Объект, к которому должны быть присоединены методы объекта Promise. Если указан целевой объект, то метод .promise() прикрепит методы к нему, а затем вернет этот объект, а не создаст новый. Это может быть полезно для присоединения поведения Promise к уже существующему объекту.

Параметр

Описание

type

Тип очереди за которой необходимо наблюдать. По умолчанию тип очереди соответствует значению "fx", что означает, что возвращаемый объект Promise изменяет свое состояние на resolved (успешное выполнение), когда все анимации выбранных элементов завершены.

target

Объект, к которому должны быть присоединены методы объекта Promise. Если указан целевой объект, то метод .promise() прикрепит методы к нему, а затем вернет этот объект, а не создаст новый. Это может быть полезно для присоединения поведения Promise к уже существующему объекту.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .promise()</title>
		<style>div {
width: 80px; /* ширина элемента */	
height: 80px; /* высота элемента */	
border: 1px solid orangered; /* сплошная граница размером 1 пиксель цвета orangered */	
margin-top: 50px; /* внешний отступ от верхнего края элемента */	
}
</style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".start" ).click(function(){ // задаем функцию при нажатиии на элемент с классом start
	    $( "div" ).animate({
	      width: "90%",    // ширина элемента
	      opacity: 0.5,    // прозрачность элемента
	      height: "150px", // высота элемента
	    }, 2000);          // длительность анимации
	    
	    $( "div" ).promise()  // возвращаем динамически сгенерированный объект Promise
	              .done(function(){ // добавляем обработчик, который сработает при изменении состояния объекта на resolved (успешное выполнение)
	                $( this ).html( "thats all" ) // добавляем новое содержимое первоначальной коллекции
	              })
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">Click me</button>
		<div>Animate me</div>
	</body>
</html>

В этом примере с использованием jQuery метода .animate() мы при нажатии на кнопку с классом start выполняем анимацию длительностью 2 секунды (2000 миллисекунд) основанную на изменении CSS свойств width (ширина элемента), opacity (прозрачность элемента) и height (высота элемента) для выбранного элемента <div> в документе.

С помощью метода .promise() мы вызываем его на коллекции элементов <div> и возвращаем динамически сгенерированный объект Promise. Этот объект изменит свое состояние на resolved (успешное выполнение) после завершения анимации, которую мы запускаем и с помощью метода deferred.done() запускаем обработчик, который с помощью метода .html() задает новое содержимое элементу <div>.

Результат нашего примера:

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

jQuery объект Deferred