jQuery метод .promise()

jQuery объект Deferred

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

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 к уже существующему объекту.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .promise()</title>
		<style></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 метода .promise().
jQuery объект Deferred