jQuery --deferred 延迟对象

来源:互联网 发布:互力微信淘客软件 编辑:程序博客网 时间:2024/03/29 15:38
一: 简单说,deferred对象就是jQuery的回调函数解决方案
  在实际的开发过程中我们常碰见一些异步操作,比如ajax和遍历一个很大的数组,不是一时半会就能得到结果,因此就需要回调函数,但是jquery在回调函数上面功能很弱,因此deferred是专门针对回调函数提出来的。
二:ajax的写法
1;常见的ajax的写法:  ajax 默认返回的就是一个promise对象
 $.ajax({ 
url: 'test.html',
success:function(data){ alert('successs') },
error: function(){ alert('faile') }
})


2.引入deferred的写法:

$.ajax('test.html')

.done(function(){ alert('success')})

.fail(function(){ alert('faile') });

可以看到在高版本中采用链式写法后,可读性更加的高。

三:指定统一操作的多个函数

deferred 对象的一大好处,就是它允许你自由添加多个回调函数。
     / / 还是上面的例子,如果想在完成后再执行一个函数,写法是这个样子的
$.ajax("test.html")
.done(function(){ alert('success') })
.fail(function(){ alert( 'faile' )})
.done( function(){ alert('这个是ajax完成后再执行的一个函数')} )


四: 为多个操作指定回调函数
 允许为多个事件指定一个回调函数,而这个是传统方法无法做到的。$.when() 它的对象必须是deferred对象

$.when( $.ajax('test1.html'),$,ajax('test2.html'))

.done(function(){ })

.error(function(){ })

五:普通操作的回调函数接口
eferred对象的最大优点,就是它把这一套回调函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作----不管是ajax操作还是本地操作,也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法,指定回调函数

注意:1:
任意一个deferred对象有三种执行状态----未完成,已完成和已失败
          2:dtd.promise() 的目的,就是保证目前的执行状态----也就是"未完成"----不变,从而确保只有操作完成后,才会触发回调函数
          3:当操作完成后,必须手动改变Deferred对象的执行状态,否则回调函数无法触发。dtd.resolve()的作用,就是将dtd的执行状态从"未完成"变成"已完成",从而触发done()方法
我们来看一个很耗时间的例子:
var wait = function(){ 
function sec(){
alert('success');
}
setInterval(sec,10000);
}
wait();
// 改写过程:
var dtd = $.Deferred();
var wait = function(dtd){
var tasks = function(){
alert('success');
dtd.resolve(); // 改变deferred 对象的执行状态
}
setInterval(tasks,5000);
return dtd.promise();
}

$.when(wait(dtd))
.done(function(){ alert('哈哈,加载成功了') })
.fail(function(){ alert('哈哈,加载是被了') })

// 或者使用
$.Deferred(wait)
.done(function(){ alert("哈哈,成功了!"); })
 .fail(function(){ alert("出错啦!"); });
除了使用$.when()为普通操作添加回调函数,还可以使用deferred对象的建构函数$.Deferred()。这时,wait函数还是保持不变,我们直接把它传入$.Deferred():


六 小结

   前面已经讲到了deferred对象的多种方法,下面做一个总结:

  (1)$.Deferred()   生成一个deferred对象。

  (2)deferred.done()  指定操作成功时的回调函数

  (3)deferred.fail()   指定操作失败时的回调函数

  (4)deferred.promise()  没有参数时,作用为保持deferred对象的运行状态不变;接受参数时,作用为在参数对象上部署deferred接口。

  (5)deferred.resolve()  手动改变deferred对象的运行状态为"已完成",从而立即触发done()方法。

  (6)$.when()  为多个操作指定回调函数。

除了这些方法以外,deferred对象还有三个重要方法,上面的教程中没有涉及到。

  (7)deferred.then()

有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。

  $.when($.ajax( "/main.php" ))

  .then(successFunc, failureFunc );

如果then()有两个参数,那么第一个参数是done()方法的回调函数,第二个参数是fail()方法的回调方法。如果then()只有一个参数,那么等同于done()。

  (8)deferred.reject()

这个方法与deferred.resolve()正好相反,调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法。

  (9)deferred.always()

这个方法也是用来指定回调函数的,它的作用是,不管调用的是deferred.resolve()还是deferred.reject(),最后总是执行。

  $.ajax( "test.html" )

  .always( function() { alert("已执行!");} );

$(document).ready(function(){

function wait(){
var def = $.Deferred();
setTimeout(function(){

alert('222');
def.resolve();
},2000);
//return def.promise();
//return def.reject('abc'); // 拒绝延迟对象
return def.rejectWith($('div'),['ok']); // 第一个是上下文的环境 第二个数数组
}

$.when(wait())
.done(function(){ alert('1111') })
.fail(function(val){
// this默认是指定这个定义的函数wait对象
$(this).append('abc')
alert(val); // ok 就是要传递的值在这个里面
});
})






0 0
原创粉丝点击