jQuery метод .notify()
jQuery объект DeferredОпределение и применение
jQuery метод .notify() запускает событие прогресса выполнения с определенными аргументами, которое позволяет вызвать обработчики состояния объекта Deffered, находящегося на стадии выполнения (функции прогресса выполнения progressCallbacks - deferred.progress() и deferred.then()).
Когда метод .notify() вызывается, любые добавленные объектом Deffered функции прогресса выполнения (progressCallbacks) вызываются. Обратные вызовы выполняются в порядке их добавления. Каждому обратному вызову могут передоваться дополнительные аргументы от метода .notify().
Любые вызовы метода .notify(), добавленные после того как объект Deffered переходит в состояние resolved (успешное выполнение), или rejected (выполнение отклонено) будут игнорированы.
Обычно этот метод должен вызываться только создателем объекта Deffered, вы можете запретить другому коду изменять состояние объекта, возвращая ограниченный объект Promise с использованием метода deferred.promise().
Если у Вас есть необходимость указывать определенный контекст исполнения, то вы можете воспользоваться методом deferred.notifyWith().
jQuery синтаксис:
Синтаксис 1.7: deferred.notify() deferred.notify( args ) args - Any
Добавлен в версии jQuery
1.7Значения параметров
Параметр | Описание |
---|---|
args | Необязательные аргументы, которые передаются функциям обратного вызова (функциям прогресса выполнения progressCallbacks - deferred.progress() и deferred.then()). |
Пример использования
<!DOCTYPE html> <html> <head> <title>Использование jQuery метода .progress() и .notify()</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function() { let dfd = $.Deferred(); // создаем объект Deferred dfd.progress(function( p ){ // добавляем обработчик, вызываемый когда объект Deffered создает уведомления о ходе выполнения $( "meter" ).attr( "value", p ); // устанавливаем значение атрибута value $( "span" ).html( p ); // задаем содержимое элемента значением переменной }) .done(function(){ // добавляем обработчик, который будет вызван при изменении состояния объекта Deffered на resolved $( "p" ).html( "операция завершена" ); // задаем содержимое элемента текстовой информацией }); $( ".start" ).click(function() { // задаем функцию при нажатиии на элемент с классом .start for (let i = 10; i <= 100; i = i + 10) { // увеличиваем i до 100 с шагом 10 setTimeout( () => { // выполняем функцию после определенной задержки dfd.notify( i ); // запускаем событие прогресса выполнения if ( i == 100 ) { // если i равно 100 dfd.resolve(); // изменяем состояние объекта Deffered на resolved } }, i * 50); // устанавливаем задержку в 500 миллисекунд } }); }); </script> </head> <body> <button class = "start">Старт</button> <meter value = "0" min = "0" max = "100" low = "40" high = "70" optimum = "90"></meter><span></span> <p></p> </body> </html>
В этом примере мы инициализируем переменную, которая содержит объект Deffered, созданный с помощью фабричной функции $.Deferred(). С помощью метода .progress() добавляем обработчик, вызываемый когда объект Deffered создает уведомления о ходе выполнения. Когда это происходит мы с помощью метода .attr() устанавливаем новое значение атрибуту value элемента <meter> значением, полученным от метода .notify(). Кроме того, мы с помощью метода .html() помещаем это значение в качестве содержимого элемента <span>.
При нажатии на элемент <button>, благодаря установленному обработчику событий "click" на элементе мы запускаем цикл, который увеличивает значение переменной i до 100 с шагом 10. Внутри цикла с помощью метода setTimeout мы выполняем функцию после определенной задержки, которая с помощью метода .notify() запускает событие прогресса выполнения, и в качестве аргумента использует текущее значение переменной цикла.
При достижении переменной значения равному 100 мы с помощью метода .resolve() изменяем состояние объекта Deffered на resolved (успешное выполнение). Обратите внимание, что у нас на объекте Deffered с помощью метода .done() установлен обработчик, который будет вызван при изменении состояния объекта Deffered на resolved и с помощью метода .html() задаст содержимое элемента текстовой информацией.
Результат нашего примера:
jQuery объект Deferred