jQuery метод .state()

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

jQuery метод .state() определяет текущее состояние выполнения объекта Deferred. Этот метод в первую очередь полезен для отладки.

Метод .state() возвращает строку, представляющую текущее состояние объекта Deferred. Объект Deferred может находиться в одном из следующих трех состояний:

• "pending" - объект Deferred находится в стадии ожидания (статус объекта не соответствует состоянию "resolved", или "rejected").
• "resolved" - объект Deferred находится в стадии resolved (успешное выполнение). Это означает, что на объекте Deferred был вызван метод .resolve(), либо .resolveWith(), при этом, предназначенные для этого функции обратного вызова (doneCallbacks) были вызваны, или вызываются.
• "rejected" - объект Deferred находится в стадии rejected (выполнение отклонено). Это означает, что на объекте Deferred был вызван метод .reject(), либо .rejectWith(), при этом, предназначенные для этого функции обратного вызова (failCallbacks) были вызваны, или вызываются.

jQuery синтаксис:

Синтаксис 1.7:

deferred.state()

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

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

<button class="test">Клик</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 и передаем значение
    })
})

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.