
Возможности объекта Deferred
Объект Deferred() может быть использован в следующих случаях:- для создания отсроченных jQuery методов;
- для создания очереди методов jQuery;
- для передачи параметров в качестве аргументов функции обратного вызова метода done();
- для отслеживания готовности jQuery методов;
- для регулирования возможного поведения дальнейшей логики JS скрипта методами then() и fail().
- так как объект Deferred() используется внутри каждого AJAX метода, допустимо вызывать сразу несколько обработчиков AJAX событий (см. пример 8);
- при инициализации указывать оператор new необязательно;
- объект Deferred() может принимать состояние resolve или reject один раз;
- сопутствующие меотды, указанные ниже, могут быть использованы напрямую с объектом Deferred() либо, если объект передан в переменную, то вызывая каждый метод для данной переменной.
Вспомогательные методы объекта
- deferred.done() — метод, выполняемый при успешном завершении метода, отслеживаемого методом resolve();
- deferred.fail() — метод, выполняющийся при неуспешном завершении метода, отслеживаемого методомresolve();
- deferred.isRejected() — возвращает true, если внутри объекта были вызваны методы reject() или rejectWith(), используется внутри метода fail();
- deferred.isResolved() — возвращает true, если объект находится в состоянии resolve и означает, что внутри объекта были вызваны методы resolve() или resolveWith(), используется внутри метода done();
- deferred.rejectWith() то же что и reject(), но передаёт в метод fail() параметр доступный через this;
- deferred.resolve() — запускает отслеживание выполнения метода jQuery;
- deferred.reject() — отклоняет отслеживание выполнения метода jQuery (7 пример);
- deferred.resolveWith() — то же что и resolve(), но передаёт в метод done() параметр доступный через this (см.8-9 пример);
- deferred.then() — метод создающий цепочку последовательных функций, далее используется во многих примерах этой статьи.
Сферы применения объекта
Объект Deferred() может применяться в методах анимации (например, для методов animate, fadeOut, fadeIn, showи т.д.), во всех AJAX методах ($.get(), $.post(), $.ajax(), $.getJSON()), при этом для методов AJAX создавать его явно нет надобности. Deferred()предоставляет большие возможности при его использовании совмести с методом when, так же введённым в jQuery 1.5, например, теперь вы можете привязывать выполнение определенной функции к успешному выполнению нескольких ajax запросов или завершению процесса анимации, либо одновременно — и к успешному выполнению нескольких ajax запросов, и к завершению процесса анимации.Примеры использования
Примеры инициализация
Как инициализировать объект Deferred()? Очень просто, как я указал ранее, вы можете передать объект в переменную и работать далее с переменной:
1 |
var dfd = $.Deferred(); |
Пример 1
1 2 3 4 5 6 7 8 9 |
$(function() { var dfd = $.Deferred(); dfd.done(function(){ console.log('Функция 1!') }); $('#result').fadeIn(2000, dfd.resolve); }); |
Пример 2
1 2 3 4 5 6 7 8 9 10 11 12 |
// привязываем обработчики к моменту завершения ajax запроса, // передавая при этом jqxhr объект, созданный из запроса var jqxhr = $.ajax({ url: 'example.php' }) .success(function() { alert('success'); }) .error(function() { alert('error'); }) .complete(function() { alert('complete'); }); .completвnction() { alert('second complete'); }); // ваш код // устанавливаем дополнительную функцию обратного вызова jqxhr.complete(function(){ alert('third complete'); }); |
Примеры объекта Deferred() в AJAX
Пример реализации объекта Deferred(), когда действие, содержащееся в методе then, будет выполнено только после успешного завершения обеих AJAX функций getData() и postData():Пример 3
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function() { function getData() { return $.get('test.php'); } function postData() { return $.post('test1.php'); } $.when(postData(), getData()).then(function(){ console.log('Ajax и анимация (fadeIn) завершены!'); }); }); |
Пример 4
1 2 3 4 5 6 7 8 9 10 11 12 |
// привязываем обработчики к моменту завершения AJAX запроса, // передавая при этом jqxhr объект, созданный из запроса var jqxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); }); .complete(function() { alert("second complete"); }); // ваш код // устанавливаем дополнительную функцию обратного вызова jqxhr.complete(function(){ alert("third complete"); }); |
Пример 5
1 2 3 4 5 6 7 8 |
$(document).ready(function() { $.when($.ajax("test.php", {}), $.ajax("test1.php", {})).done(function(a1, a2) { var jqXHR = a1[2]; /* ["success", statusText, jqXHR] */ alert(jqXHR.statusText); }); }); |
Объект Deffered и методы анимации в jQuery
В предыдущих методах не были раскрыты все возможности объекта Deferred(). В методах анимации вместе с объектом допустимо использовать сопутствующие методы — fail, done, then, resolve, resolveWith, reject, rejectWith. В следующем примере указан способ применения объекта Deferred(), когда, вновь созданные методы jDefferedIn иjDefferedOut, являясь аргументами метода when, используются для создания отсроченного метода then. Обратите особое внимание на инициализацию объекта Deferred(), чтобы выполнение определенных методов могло быть отслежено, необходимо указывать внутри функции обратного вызова метод resolve, который в свою очередь информирует о завершении функции, через метод promise():Пример 6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(document).ready(function () { jQuery.fn.jDefferedIn = function() { var dfd = $.Deferred(); $(this).fadeIn(2000, dfd.resolve); return dfd.promise(); }; jQuery.fn.jDefferedOut = function() { var dfd = $.Deferred(); $(this).fadeOut( 2000, dfd.resolve ); return dfd.promise(); }; $.when($('#result').jDefferedIn(), $('#result').jDefferedOut()).then(function() { console.log('Обе функции завершены!') }); }); |
Пример 7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(document).ready(function() { function showDiv() { var dfd = $.Deferred(); dfd.done(function(){ console.log('Анимация 1 завершена'); }); $("#result").fadeIn( 2000, dfd.resolve); return dfd.promise(); } function hideDiv() { var dfd = $.Deferred(); dfd.done(function() { console.log('Здесь объект отклонён'); }); dfd.reject(); $('#result').fadeOut(1000, dfd.resolve); return dfd.promise(); } $.when(showDiv(), hideDiv()).then(function() { console.log('Анимация (fadeIn и fadeOut) завершены!'); }).fail(function(){ console.log('Метод fail будет запущен только в случае не успешного выполнения одной из функций showDiv(), hideDiv().'); }); }); |
Пример 8
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function() { var dfd = $.Deferred(); var dfdnew = $.Deferred(); dfd.done(function(){ console.log('Массив с именем: '+this.name); }); dfdnew.done(function(){ console.log('Массив с именем: '+this.name); }); var data = {name: "Pete", age: 15}; var newdata = {name: "Alex", age: 15}; dfdnew.resolveWith(newdata); dfd.resolveWith(data); return dfd.promise(); }); |
Пример 9
1 2 3 4 5 6 7 8 9 10 11 12 |
function showDiv(){ var dfd = $.Deferred(); dfd.done(function() { console.log('Анимация завершена. Имя:'+ this.name); }); var data = {name: "Pete", age: 15}; $('#foo').fadeIn( 5000, function() { dfd.resolveWith(data)} ); return dfd.promise(); } |
Заключение
На этом всё с основными изменениями в jQuery 1.5. О других изменениях, таких как добавление новых методов $.sub(),$.parseXML(), а так же о расширенных возможностях AJAX, я напишу в следующих статьях! Источник: Объект jQuery Deferred | JavaScript | Временно.нет.Объект jQuery Deferred