jQuery.deferred对象使用详解


Posted in Javascript onMarch 18, 2016

一、前言
jQuery1.5之前,如果需要多次Ajax操作,我们一般会使用下面的两种方式:

1).串行调用Ajax

$.ajax({ success: function() { 
  $.ajax({ success: function() {
    $.ajax({ //callbacks... 
        }); 
  }); 
});

这种方式代码可读性差,效率低,晦涩难懂,调试和排错的复杂度大。

2).并行调用Ajax

var promises = []; 
$.ajax({
  success: function() { 
    promises.push('resolved'); 
    check(); 
  } 
}); 
$.ajax({ 
  success: function() { 
    promises.push('resolved'); 
    check();
  } 
}); 
$.ajax({ 
  success: function() { 
    promises.push('resolved'); 
    check(); 
  } 
}); 
var check = function() { //checks for all 3 values in the promises array }

这种方式对于callbacks函数调用来说已经很不错了,并行取得数据,可读性良好。缺点就是代码冗长,可扩展性差,调试和排错的复杂度高。

jQuery1.5之后,增加了deferred对象。因此可以用下面这种方式实现和上面同样的需求。

1)Promise

var address = $.ajax({}); 
var tweets = $.ajax({}); 
var facebook = $.ajax({}); 
render_side_bar = function(address, tweets, facebook){ 
  //render sidebar 
}
render_no_side_bar = function () { }
$.when(address, tweets, facebook).then(render_side_bar, render_no_side_bar)

可以看出,代码可读性良好,可扩展性高,并且大大降低了调试和排错的复杂度。

那么问题来了,promises和deferred对象究竟是个什么玩意呢?

二、详解
2.什么是deferred对象?
deferred对象即延迟对象,它是jQuery 1.5版本引入的一种回调函数的解决方案,代表了将要完成的某种操作,并且提供了一些方法,帮助用户使用。

deferred对象是对Promises接口的实现。jQuery 1.5版本以及之后所有的Ajax返回的jqXHR对象就是一个deferred对象。

2.deferred对象的几大好处
2.1.为同一操作指定多个回调函数
deferred对象的好处之一,就是它允许你为一个操作添加多个回调函数,这在传统的ajax中是无法实现的。

$.ajax("test.html")
.done(function(){ alert("first success callback!");} )

.fail(function(){ alert("there is an error!"); } )

.done(function(){ alert("second success callback!");} );

2.2.为多个操作指定同一个回调函数
deferred对象的好处之二,就是它允许你为多个操作指定同一个回调函数,这在传统的ajax中也是无法实现的。

$.when($.ajax({}), $.ajax({}))
.done(function(){ alert("success!"); })

.fail(function(){ alert("error!"); });

2.3.非Ajax操作的回调函数
deferred对象的好处之三,就是它不再拘泥于ajax操作,任意的操作(ajax操作or本地操作/异步操作or同步操作)都可以使用deferred对象,指定回调函数。

一个很典型的耗时操作

var dfd = $.Deferred(); // create a deferred object
var wait = function(dtd){


var tasks = function(){



alert("over!");



dtd.resolve(); // change the state of the deferred object from pending to resolved


};


setTimeout(tasks,50000);


return dtd;

};
$.when(wait(dtd))
.done(function(){ alert("success!"); })

.fail(function(){ alert("error!"); });

2.4.链式调用
jQuery中传统的ajax操作是这样的:

$.ajax({
  url: "",
 success: function(){


alert("success!");

 },

 error:function(){


alert("error!");

 }
});

其中success指定ajax操作成功后的回调函数,error指定ajax操作失败后的回调函数。jQuery1.5版本之前,Ajax操作返回的是一个XMLHTTPRequest对象,不支持链式操作。1.5版本开始,ajax操作返回的是jqXHR对象,这是一个deferred对象,而deferred对象一个显著的好处就是可以进行链式操作,因为deferred对象的所有方法返回的均是deferred对象。

现在的ajax操作的写法是:

$.ajax({})
.done(function(){ alert("success!"); })

.fail(function(){ alert("fail!"); });

两种写法对比可以很明显的看出来,done()相当于传统ajax操作的success方法,fail()相当于传统ajax操作的fail方法。相对于传统的写法,代码可读性提高了。

3.deferred对象的方法
3.1基本用法
(1).生成deferred对象

var dfd = $.Deferred(); //create a deferred object
(2).deferred对象的状态

deferred对象有三种状态

pending:表示操作处于未完成的状态,任何deferred(延迟)对象开始于pending状态。
resolved:表示操作成功。
rejected:表示操作失败。
state()方法返回deferred对象的当前状态。

$.Deferred().state(); // 'pending'
$.Deferred().resolve().state(); // 'resolved'
$.Deferred().reject().state(); // 'rejected'

(3).改变deferred对象的状态

调用deferred.resolve() 或者 deferred.resolveWith()转换Deferred(递延)到resolved(解决)的状态,并立即执行设置中任何的doneCallbacks。

var callbackFunc = function(){console.log(arguments[0]);}
var dfd = $.Deferred();
dfd.done(callbackFunc);
dfd.resolve("hello"); //'hello'

调用deferred.reject() 或者 deferred.rejectWith()转换Deferred(递延)到rejected(拒绝)的状态,并立即执行设置中任何的failCallbacks。

var callbackFunc = function(){console.log(arguments[0]);}
var dfd = $.Deferred();
dfd.fail(callbackFunc);
dfd.reject("fail"); //'fail'

(4).绑定回调函数

deferred对象状态改变的时候,会触发回调函数。任何回调使用deferred.then(), deferred.always(), deferred.done()或者 deferred.fail()添加到这个对象都是排队等待执行。

pending-->resolved,执行设置中任何的doneCallbacks(done()指定),参数由resolved传递给doneCallbacks。
pending-->rejected,执行设置中任何的failCallbacks(fail()指定),参数由resolved传递给failCallbacks。
pending-->resolved/rejected,执行always()指定的callbacks,参数由resolved传递给callbacks。

var f1 = function(){console.log("done");}, 
   f2 = function(){console.log("fail");}, 
   f3 = function(){console.log("always");};

var dfd = $.Deferred();
dfd.done(f1).fail(f2).always(f3);

//if
dfd.resolve(); //'done' 'always'
//if
dfd.reject(); //'fail' 'always'

如果在状态更改后附件一个callback则会立即执行callback,因此不必担心deferred对象何时被resolved或者rejected,因为无论何时,参数都会正确地传递给callbacks。

var fun1 = function(){console.log(arguments[0]);},
  fun1 = function(){console.log(arguments[0]);};
var dfd = $.Deferred();
dfd.done(fun1);
dfd.resolve("hello"); //'hello'
dfd.done(fun2); //'hello'

3.2.deferred对象的方法
(1)$.Deferred([beforeStart]) -- 创建一个deferred对象,参数类型为Function,是一个在构造函数之前调用的函数。

var func = function(){console.log("start");} 
var dfd = $.Deferred(func); //'start' create a deferred object

(2)deferred.done(doneCallbacks [,doneCallbacks]) -- 当deferred(延迟)对象解决时,调用添加处理程序。

args:接受一个或者多个参数,所有的参数都可以是一个单一的函数或者函数数组,当deferred(延迟)对象解决时,doneCallbacks被调用。回调是依照他们添加的顺序执行的。

var func1 = function(){console.log("1");},
   func2 = function(){console.log("2");},
   func3 = function(){console.log("3");};
var dfd = $.Deferred();
dfd.done([func1,func2],func3,[func2,func1]);
dfd.resolve(); // "1 2 3 2 1"

(3)deferred.fail(failCallbacks [,failCallbacks]) -- 当deferred(延迟)对象拒绝时,调用添加处理程序。

args:接受一个或者多个参数,所有的参数都可以是一个单一的函数或者函数数组,当deferred(延迟)对象拒绝时,failCallbacks被调用。回调是依照他们添加的顺序执行的。

var func1 = function(){console.log("1");},
   func2 = function(){console.log("2");},
   func3 = function(){console.log("3");};
var dfd = $.Deferred();
dfd.fail([func1,func2],func3,[func2,func1]);
dfd.reject(); // "1 2 3 2 1"

(4)deferred.resolve(args) and deferred.resolveWith(context [,args]) -- 解决Deferred(延迟)对象,并根据给定的args参数(resolveWith给定context)调用任何doneCallbacks。

参数:args -- type(object),传递给回调函数(doneCallbacks)的可选的参数,

        context -- type(object),Context(上下文)作为this对象传递给完成回调函数(doneCallbacks)。

var func = function(arg){console.log(arg);};
$.Deferred().done(func).resolve("done!"); //'done!'
var func = function(arg1,arg2){console.log(arg1.name + ',' + arg2);};
$.Deferred().done(func).resolve({name:'Lucy'},'How are you!'); // 'Lucy,How are you!'

resolve和resolveWith的区别就等同于fire和fireWith的区别。

var func = function () {
  console.log(this.name + ',' + arguments[0] + ' ' + arguments[1] + ' ' + arguments[2]);
};
$.Deferred().done(func).resolveWith({ name: "Lucy" }, ["How", "are", "you!"]);//'Lucy,How are you!'

(5)deferred.reject(args) and deferred.rejectWith(context [,args]) -- 拒绝Deferred(延迟)对象,并根据给定的args参数(rejectWith给定context)调用任何failCallbacks。

参数:args -- type(object),传递给回调函数(doneCallbacks)的可选的参数,

        context -- type(object),Context(上下文)作为this对象传递给完成回调函数(doneCallbacks)。

var func = function(arg){console.log(arg);};
$.Deferred().fail(func).reject("error!"); //'error!'
var func = function(ctx,arg){console.log(ctx.name + ',' + arg);};
$.Deferred().fail(func).reject({name:'Mark'},'What happend!'); // 'Mark,What happend!'

reject和rejectWith的区别就等同于fire和fireWith的区别。

var func = function () {
  console.log(this.name + ',' + arguments[0] + ' ' + arguments[1]);
};
$.Deferred().fail(func).rejectWith({ name: "Mark" }, ["what", "happend!"]); // 'Mark,What happend!'

(6)deferred.promise([target]) -- 返回Deferred(延迟)的Promise(承诺)对象。

 参数可选,无参数时返回一个Promise(承诺)对象,Promise(承诺)对象仅会暴露那些需要绑定额外的处理或判断状态的延迟方法(then, done, fail, always,pipe, progress, state,和 promise)时,并不会暴露任何用于改变状态的延迟方法(resolve, reject, notify,resolveWith, rejectWith, 和 notifyWith)。使用Promise(承诺)会阻止其他人破坏你制造的promise。

function asyncEvent() {
   var dfd = jQuery.Deferred();

    // Resolve after a random interval
    setTimeout(function () {
       dfd.resolve("hurray");
    }, Math.floor(400 + Math.random() * 2000));

    // Reject after a random interval
    setTimeout(function () {
       dfd.reject("sorry");
    }, Math.floor(400 + Math.random() * 2000));

    // Show a "working..." message every half-second
    setTimeout(function working() {
       if (dfd.state() === "pending") {
          dfd.notify("working... ");
           setTimeout(working, 500);
        }
     }, 1);

      // Return the Promise so caller can't change the Deferred
      return dfd.promise();
 }

// Attach a done, fail, and progress handler for the asyncEvent
$.when(asyncEvent()).then(
    function (status) {
       alert(status + ", things are going well");
    },
    function (status) {
       alert(status + ", you fail this time");
    },
    function (status) {
       alert(status);
    }
);

有参数时,会将事件绑定到参数上,然后返回该参数对象(返回的实际是一个扩展的Promise(承诺)对象)。

var obj = {
  hello: function (name) {
    alert("Hello " + name);
  }
},
// Create a Deferred
dfd = $.Deferred();

// Set object as a promise
dfd.promise(obj);

// Resolve the deferred
dfd.resolve("John");

// Use the object as a Promise
obj.done(function (name) {
   obj.hello(name); // will alert "Hello John"
}).hello("Karl");

(7)$.when(deferreds) -- 提供一种方法来执行一个或多个对象的回调函数。

参数:type(Deferred),一个或多个延迟对象,或者普通的JavaScript对象。

参数仅传入一个单独的Deferred对象,返回它的Promise对象。

function func() {
  var dfd = $.Deferred();
  setTimeout(function () {
    dfd.resolve("hurry");
  }, 500);
  return dfd.promise();
};

$.when(func()).done(function (arg) {
  alert(arg); /*alert "hurry"*/
});

参数传入一个非Deferred和Promise对象,那么该参数会被当成一个被解决(resolved)的延迟对象,并且绑定到上面的任何doneCallbacks都会被立即执行。

$.when( { name: 123 } ).done(
  function(arg) { alert(arg.name); } /* alerts "123" */
);

无参数,返回一个resolved(解决)状态的Promise对象。

$.when().state(); // "resolved"

参数为多个Deferred对象,该方法根据一个新的“宿主” Deferred(延迟)对象,跟踪所有已通过Deferreds聚集状态,返回一个Promise对象。当所有的延迟对象被解决(resolve)时,“宿主” Deferred(延迟)对象才会解决(resolved)该方法,或者当其中有一个延迟对象被拒绝(rejected)时,“宿主” Deferred(延迟)对象就会reject(拒绝)该方法。

var d1 = $.Deferred();
var d2 = $.Deferred();
 
$.when( d1, d2 ).done(function ( v1, v2 ) {
  console.log( v1 ); // "Fish"
  console.log( v2 ); // "Pizza"
});
 
d1.resolve( "Fish" );
d2.resolve( "Pizza" );

(8)deferred.then(doneFilter [,failFilter] [,progressFilter]) -- 当Deferred(延迟)对象解决,拒绝或仍在进行中时,调用添加处理程序。

参数:

doneFilter --   type(Function),当Deferred(延迟)对象得到解决时被调用的一个函数。
failFilter --   type(Function),当Deferred(延迟)对象拒绝时被调用的一个函数,可选。
progressFilter --   type(Function),当Deferred(延迟)对象生成进度通知时被调用的一个函数,可选。
其实,then方法可以理解成,把done(),fail(),progress()合在一起写。

var filterResolve = function () {
   var dfd = $.Deferred(),
     filtered = dfd.then(function (value) { return value * 2; });
   dfd.resolve(5);
   filtered.done(function (value) { console.log(value); });
};
filterResolve(); //'10'

var defer = $.Deferred(),
   filtered = defer.then(null, function (value) {
     return value * 3;
   });

defer.reject(6);
filtered.fail(function (value) {
   alert("Value is 3*6 = " + value);
});

(9)deferred.always(alwaysCallbacks [,alwaysCallbacks]) -- 当Deferred(延迟)对象解决或拒绝时,执行alwaysCallbacks。

 顾名思义,只要Deferred对象的状态发生更改(解决或者拒绝)均会调用alwaysCallbacks。

(10)deferred.state() -- 获取一个Deferred(延迟)对象的当前状态,不接受任何参数。

$.Deferred().state();//"pending"
上面讲述过deferre(延迟)对象的三种状态,这个方法对于debug非常有用,例如,在准备reject一个deferred对象之前,判断它是否处于resolved状态。

(11)deferred.notify(args) and deferred.notifyWith()

(12)deferred.progress()

(13)deferred.pipe()

(14).promise()

(15)deferred.isRejected() 和 deferred.isResolved() --  从jQuery 1.7开始被弃用,较新版本的jQuery类库中已经被删除,可以使用state()方法代替这两个方法。

(16)deferred.pipe() -- 从jQuery 1.8开始被弃用。

4.什么情况下使用deferred对象和Promises?
上面讲了很多,那么我们究竟在什么情况下使用Deferred对象和Promises对象呢?

(1)复杂的动画

不知道动画什么时候结束,但是又必须在动画结束的时候做一些操作或者是启动其他的动画,这种情况下,如果采用其他的方式,很容易导致代码可读性差,尤其是还夹带着一些其它的操作,比如渲染、表单操作等,现在jQuery会为你的动画操作返回一个Promise,这样这些动画可以进行链式操作。

(2)处理队列

window.queue = $.when() $('#list').on('click', function() { window.queue = window.queue.then(function() { //do the thing }) } )

(3)The Wait promise
function wait(ms) { 
  var deferred = $.Deferred(); 
  setTimeout(function(){deferred.resolve()}, ms);
  return deferred.promise(); 
}

wait(1500).then(function () {
    // After 1500ms this will be executed 
});

(4)典型的Ajax操作

$.when($.ajax({}), $.ajax({}))
.done(function(){ alert("success!"); })

.fail(function(){ alert("error!"); });

(5)一些耗时的大循环操作

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
JS中的二叉树遍历详解
Mar 18 #Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 #Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 #Javascript
Javascript的表单验证-初识正则表达式
Mar 18 #Javascript
Javascript的表单验证-提交表单
Mar 18 #Javascript
Javascript的表单与验证-非空验证
Mar 18 #Javascript
悬浮广告方法日常收集整理
Mar 18 #Javascript
You might like
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue实现购物车的监听
2020/04/20 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python读取Android permission文件
2013/11/01 Python
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python解析含有重复key的json方法
2019/01/22 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Django之腾讯云短信的实现
2020/06/12 Python
python 安装移动复制第三方库操作
2020/07/13 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
工厂保安员岗位职责
2014/01/31 职场文书
大班开学家长寄语
2014/04/04 职场文书
交通工程专业推荐信
2014/09/06 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
党校毕业个人总结
2015/02/28 职场文书
2015年体育部工作总结
2015/04/02 职场文书