jQuery метод .promise()

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

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

jQuery синтаксис:

Синтаксис 1.6:

JavaScript

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

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

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

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<button class="start">Click me</button>
<div>Animate me</div>

main.js

JavaScript

$(document).ready(function () {
    $('.start').click(function () {
        $('div').animate(
            {
                width: '90%',
                opacity: 0.5,
                height: '150px',
            },
            2000
        )

        $('div')
            .promise()
            .done(function () {
                $(this).html('thats all')
            })
    })
})

style.css

CSS

div {
    width: 80px;
    height: 80px;
    border: 1px solid orangered;
    margin-top: 50px;
}

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

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