jQuery метод .progress()

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

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

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

Когда состояние объекта Deffered измененяется на resolved (успешное выполнение), или rejected (выполнение отклонено), то обратные вызовы хода выполнения (progressCallbacks) больше не будут вызываться, за исключением того, что любые progressCallbacks, добавленные после того, как Deffered перешел в состояние resolved или rejected, выполняются сразу же после их добавления, используя аргументы, переданные методами .notify() или .notifyWith() при вызове.

Ввиду того, что метод .progress() возвращает объект Deffered, то к нему могут быть присоеденены по цепочке другие методы объекта Deffered.

jQuery синтаксис:

Синтаксис 1.7:

deferred.done( progressCallbacks )
deferred.done( progressCallbacks, ..., progressCallbacks )


progressCallbacks - Function (или массив функций)

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

1.5

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

Параметр	Описание
progressCallbacks	Функция или массив функций, которые вызываются когда объект Deffered создает уведомления о ходе выполнения.

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

<!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 метода .progress() и .notify().

jQuery объект Deferred