deferred对象,是一个异步队列。能够实现异步代码调用,从而解决代码执行顺序的问题。
它提供了一下主要方法:
jQuery.Deferred() | 一个构造函数,返回一个链式实用对象方法来注册多个回调,回调队列, 调用回调队列,并转达任何同步或异步函数的成功或失败状态。 |
deferred.always() | 当Deferred(延迟)对象解决或拒绝时,调用添加处理程序 |
deferred.done() | 当Deferred(延迟)对象解决时,调用添加处理程序 |
deferred.fail() | 当Deferred(延迟)对象拒绝时,调用添加处理程序。 |
deferred.isRejected() | 确定一个Deferred(延迟)对象是否已被拒绝。 |
deferred.isResolved() | 确定一个Deferred(延迟)对象是否已被解决。 |
deferred.notify() | 根据给定的 args参数 调用Deferred(延迟)对象上进行中的回调 (progressCallbacks) |
deferred.notifyWith() | 根据给定的上下文(context)和args递延调用Deferred(延迟)对象上进行中的回调(progressCallbacks ) |
deferred.pipe() | 实用的方法来过滤 and/or 链Deferreds。 |
deferred.progress() | 当Deferred(延迟)对象生成进度通知时,调用添加处理程 |
deferred.promise() | 返回Deferred(延迟)的Promise(承诺)对象。 |
deferred.reject() | 拒绝Deferred(延迟)对象,并根据给定的args参数调用任何失败回调函数(failCallbacks) |
deferred.rejectWith() | 拒绝Deferred(延迟)对象,并根据给定的 context和args参数调用任何失败回调函数(failCallbacks)。 |
deferred.resolve() | 解决Deferred(延迟)对象,并根据给定的args参数调用任何完成回调函数(doneCallbacks) |
deferred.resolveWith() | 解决Deferred(延迟)对象,并根据给定的 context和args参数调用任何完成回调函数(doneCallbacks) |
deferred.state() | 确定一个Deferred(延迟)对象的当前状态 |
deferred.then() | 当Deferred(延迟)对象解决,拒绝或仍在进行中时,调用添加处理程序。 |
jQuery.when() | 提供一种方法来执行一个或多个对象的回调函数, Deferred(延迟)对象通常表示异步事件。 |
.promise() | 返回一个 Promise 对象用来观察当某种类型的所有行动绑定到集合,排队与否还是已经完成 |
下面我自己写了一个小例子,有助于理解这个异步对象。程序背景,就是查询本地数据库之后需要做一些操作。
1.
1 var shortName = 'table1'; 2 var version = '1.0'; 3 var displayName = 'personal Database'; 4 var maxSize = 5*1024*1024; // bytes 5 DB = openDatabase(shortName, version, displayName, maxSize); 6 7 CREATE TABLE IF NOT EXISTS message(id varchar(50) NOT NULL PRIMARY KEY, senderName varchar(200) NOT NULL,nickName varchar(200) NOT NULL,title TEXT, content TEXT,sendTime timestamp,type char(5),tag char(5) default 0,job varchar(20),recevierName varchar(50),readFlag char(5) default 0,sys varchar(20) not null); 8 9 INSERT INTO message(id,senderName,nickName,title,content,sendTime,type,job,recevierName,sys) VALUES('01','lili','小红','你好!','hahahah','2015-04-10','1','','xx','1'); 10 11 12 var obj = $.Deferred(); 13 var select = function(def){ 14 DB.transaction( 15 function (transaction) { 16 transaction.executeSql("select * from message group by senderName order by strftime('%s',sendTime) desc",[], 17 function(transaction, results){ 18 def.resolve(results); 19 }, function(transaction, results){ 20 def.reject(results); 21 }); 22 }); 23 return def; 24 } 25 $.when(select(obj)).done(function(data){//查询成功的回调 26 console.log(data) 27 }).fail(function(){//失败的回调
console.log(data);
});
2.
1 var dtd = $.Deferred(); // 新建一个Deferred对象 2 3 var wait = function(dtd){ 4 5 alert("执行完毕!"); 6 7 dtd.resolve(); // 改变Deferred对象的执行状态 8 9 return dtd; 10 11 }; 12 13 $.when(wait(dtd)) 14 15 .done(function(){ alert("哈哈,成功了!"); }) 16 17 .fail(function(){ alert("出错啦!"); });
另:
deferred.promise()方法
上面这种写法,还是有问题。那就是dtd是一个全局对象,所以它的执行状态可以从外部改变。
请看下面的代码:
var dtd = $.Deferred(); // 新建一个Deferred对象 var wait = function(dtd){ var tasks = function(){ alert("执行完毕!"); dtd.resolve(); // 改变Deferred对象的执行状态 }; setTimeout(tasks,5000); return dtd; }; $.when(wait(dtd)) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); }); dtd.resolve();
(运行代码示例8)
我在代码的尾部加了一行dtd.resolve(),这就改变了dtd对象的执行状态,因此导致done()方法立刻执行,跳出"哈哈,成功了!"的提示框,等5秒之后再跳出"执行完毕!"的提示框。
为了避免这种情况,jQuery提供了deferred.promise()方法。它的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。
请看下面的代码:
1 var dtd = $.Deferred(); // 新建一个Deferred对象 2 3 var wait = function(dtd){ 4 5 var tasks = function(){ 6 7 alert("执行完毕!"); 8 9 dtd.resolve(); // 改变Deferred对象的执行状态 10 11 }; 12 13 setTimeout(tasks,5000); 14 15 return dtd.promise(); // 返回promise对象 16 17 }; 18 19 var d = wait(dtd); // 新建一个d对象,改为对这个对象进行操作 20 21 $.when(d) 22 23 .done(function(){ alert("哈哈,成功了!"); }) 24 25 .fail(function(){ alert("出错啦!"); }); 26 27 d.resolve(); // 此时,这个语句是无效的
(运行代码示例9)
在上面的这段代码中,wait()函数返回的是promise对象。然后,我们把回调函数绑定在这个对象上面,而不是原来的deferred对象上面。这样的好处是,无法改变这个对象的执行状态,要想改变执行状态,只能操作原来的deferred对象。
不过,更好的写法是allenm所指出的,将dtd对象变成wait()函数的内部对象。
1 var wait = function(dtd){ 2 3 var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象 4 5 var tasks = function(){ 6 7 alert("执行完毕!"); 8 9 dtd.resolve(); // 改变Deferred对象的执行状态 10 11 }; 12 13 setTimeout(tasks,5000); 14 15 return dtd.promise(); // 返回promise对象 16 17 }; 18 19 $.when(wait()) 20 21 .done(function(){ alert("哈哈,成功了!"); }) 22 23 .fail(function(){ alert("出错啦!"); });
(运行代码示例10)