jQuery метод .notifyWith()
Определение и применение
jQuery метод .notifyWith() запускает событие прогресса выполнения с определенными аргументами и контекстом
выполнения, которое позволяет вызвать обработчики состояния объекта Deferred, находящегося на стадии
выполнения (deferred.progress()
и
deferred.then()).
Когда метод .notifyWith() вызывается, любые добавленные объектом Deferred функции прогресса
выполнения (progressCallbacks) вызываются. Обратные вызовы выполняются в порядке их добавления. Каждому
обратному вызову могут передоваться дополнительные аргументы от метода .notifyWith().
Любые вызовы метода .notifyWith(), добавленные после того как объект Deferred переходит в
состояние resolved (успешное выполнение), или rejected (выполнение отклонено) будут игнорированы.
Если у Вас отсутствует необходимость указывать определенный контекст исполнения, то вы можете воспользоваться методом deferred.notify().
jQuery синтаксис:
Синтаксис 1.7:
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
<button class="start">Старт</button> <meter value="0" min="0" max="100" low="40" high="70" optimum="90"></meter
><span></span>
<p></p>
main.js
$(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()
задаст содержимое элемента текстовой информацией.