jQuery метод .notifyWith()

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

jQuery метод .notifyWith() запускает событие прогресса выполнения с определенными аргументами и контекстом выполнения, которое позволяет вызвать обработчики состояния объекта Deferred, находящегося на стадии выполнения (deferred.progress() и deferred.then()).

Когда метод .notifyWith() вызывается, любые добавленные объектом Deferred функции прогресса выполнения (progressCallbacks) вызываются. Обратные вызовы выполняются в порядке их добавления. Каждому обратному вызову могут передоваться дополнительные аргументы от метода .notifyWith().

Любые вызовы метода .notifyWith(), добавленные после того как объект Deferred переходит в состояние resolved (успешное выполнение), или rejected (выполнение отклонено) будут игнорированы.

Если у Вас отсутствует необходимость указывать определенный контекст исполнения, то вы можете воспользоваться методом deferred.notify().

jQuery синтаксис:

Синтаксис 1.7:

JavaScript
deferred.notifyWith( context )
deferred.notifyWith( context, args )

context - Object

args - Array

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

1.7

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

Параметр Описание
context Контекст (объект this), который передается функциям обратного вызова (функциям прогресса выполнения progressCallbacks - deferred.progress() и deferred.then()).
args Необязательные аргументы, которые передаются в виде массива функциям обратного вызова (функциям прогресса выполнения progressCallbacks - deferred.progress() и deferred.then()).

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

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

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

index.html
HTML
<button class="start">Старт</button> <meter value="0" min="0" max="100" low="40" high="70" optimum="90"></meter
><span></span>
<p></p>
main.js
JavaScript
$(document).ready(function () {
    let dfd = $.Deferred()

    dfd.progress(function (p) {
        $('meter').attr('value', p)
        $('span').html(p)
    }).done(function () {
        $('p').html('операция завершена')
    })

    $('.start').click(function () {
        for (let i = 10; i <= 100; i = i + 10) {
            setTimeout(() => {
                dfd.notify(i)
                if (i == 100) {
                    dfd.resolve()
                }
            }, i * 50)
        }
    })
})

В этом примере мы инициализируем переменную, которая содержит объект Deferred, созданный с помощью фабричной функции $.Deferred(). С помощью метода .progress() добавляем обработчик, вызываемый когда объект Deferred создает уведомления о ходе выполнения. Когда это происходит мы с помощью метода .attr() устанавливаем новое значение атрибуту value элемента <meter> значением, полученным от метода .notifyWith(). Обратите внимание, что в качестве контекста мы передаем методу .notifyWith() текущий контекст (this), это аналогично вызову метода .notify( i ). Кроме того, мы с помощью метода .html() помещаем это значение в качестве содержимого элемента <span>.

При нажатии на элемент <button>, благодаря установленному обработчику событий "click" на элементе мы запускаем цикл, который увеличивает значение переменной i до 100 с шагом 10. Внутри цикла с помощью метода setTimeout мы выполняем функцию после определенной задержки, которая с помощью метода .notify() запускает событие прогресса выполнения, и в качестве аргумента использует текущее значение переменной цикла.

При достижении переменной значения равному 100 мы с помощью метода .resolve() изменяем состояние объекта Deferred на resolved (успешное выполнение). Обратите внимание, что у нас на объекте Deferred с помощью метода .done() установлен обработчик, который будет вызван при изменении состояния объекта Deferred на resolved и с помощью метода .html() задаст содержимое элемента текстовой информацией.