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 (выполнение отклонено), то он остается в этом состоянии. Обратные вызовы по прежнему могут быть добавлены к подобным объектам, но обработчики .done() и .fail() будут выполняться немедленно. Начиная с jQuery 3 обработчики .then() и .catch() выполняются асинхронно.

jQuery синтаксис:

Синтаксис 1.5:

// без параметра
let myDeferredObject = $.Deferred()

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

beforeStart - Function( Deferred deferred )

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

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

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

<button class="resolve">Resolve</button>
<button class="reject">Reject</button>
<button data-example-event-0="">Page reload</button>

$(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 и передаем значение
    })
})

document.querySelector('[data-example-event-0]').addEventListener('click', function (event) {
    window.location.reload()
})

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

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

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

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

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