jQuery метод deferred.promise()

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

jQuery метод deferred.promise() возвращает копию объекта Deferred (объект Promise), который имеет аналогичный набор методов, за исключением методов изменения состояния объекта.

Метод deferred.promise() позволяет асинхронной функции предотвратить вмешательство другого кода в ход выполнения, или изменения состояния ее внутреннего запроса. Объект Promise предоставляет только те методы объекта Deferred, которые необходимы для подключения дополнительных обработчиков, или определения состояния выполнения объекта (методы .then(), .done(), .fail(), .always(), .progress(), .state() и .promise()).

jQuery синтаксис:

Синтаксис 1.5:

// возвращает новый объект
deferred.promise()

// добавление методов к уже существующему объекту
deferred.promise( target )

target - Object

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

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

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

Метод deferred.promise() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>

main.js

JavaScript

$(document).ready(function () {
    function asyncEvent() {
        let dfd = $.Deferred() // создаем объект Deferred

        // изменяем статус объекта на "resolved" после случайного интервала
        setTimeout(
            function () {
                dfd.resolve('resolved')
            },
            Math.floor(Math.random() * 1000),
        )

        // изменяем статус объекта на "rejected" после случайного интервала
        setTimeout(
            function () {
                dfd.reject('rejected')
            },
            Math.floor(Math.random() * 1000),
        )

        // возвращаем Promise
        return dfd.promise()
    }

    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $.when(asyncEvent()).then(
            function (status) {
                // присоединяем обработчик для успешного выполнения
                console.log(status)
            },
            function (status) {
                // присоединяем обработчик для случая когда выполнение отклонено
                console.log('Отклонено:', status)
            },
        )
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

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

При нажатии на элемент <button>, благодаря установленному обработчику событий "click" на элементе мы с помощью метода $.when() ожидаем изменения состояния объекта Promise на который мы с помощью метода deferred.then() присоединили обработчики состояния для случая когда выполнение отклонено ("rejected"), и когда выполнение успешно ("resolved"). Обратите внимание, что состояние объекта Promise мы не можем изменить напрямую, а делаем это через первоначальный объект Deferred на котором был вызван метод deferred.promise(). Информация о изменении состояния объекта после каждого нажатия на кнопку (элемент <button>) выводится в консоль браузера.

В следующем примере мы рассмотрим использование метода deferred.promise() с дополнительным параметром:

<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery метода .promise() с параметром</title>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script>
      $(document).ready(function () {
        // инициализируем переменную, содержащую объект
        let obj = {
          greet: function (name) {
            $("p").html("Hello " + name);
          },
        };

        // создаем объект Deferred
        let dfd = $.Deferred();

        // устанавливаем объект obj как объект Promise
        dfd.promise(obj);

        // присоединяем обработчик при изменении состояния объекта Deferred на "resolved"
        obj.done((name) => obj.greet(name));

        $("button").click(function () {
          // задаем функцию при нажатиии на элемент <button>
          dfd.resolve(prompt("Введите Ваше имя"));
        });
      });
    </script>
  </head>
  <body>
    <button>Resolve</button>
    <p></p>
  </body>
</html>

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

С помощью метода deferred.promise() мы прикрепляем указанному объекту методы объекта Deferred и возвращаем ограниченную копию этого объекта (объект Promise). Для этого объекта мы присоединяем обработчик, который сработает при изменении состояния объекта Deferred на "resolved" (успешное выполнение) и вызовет метод объекта obj.

При нажатии на элемент <button>, благодаря установленному обработчику событий "click" на элементе мы с помощью метода .resolve() изменяем состояние объекта Deferred на resolved (успешное выполнение) и вызываем любые, предназначенные для подобных ситуаций функции обратного вызова (doneCallbacks) с заданными аргументами. Обратите внимание, что метод .resolve() в качестве параметра принимает результат вызова метода window.prompt(), который позволяет ввести произвольную текстовую информацию.