温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery中的deferred详解

发布时间:2020-06-18 09:26:14 来源:网络 阅读:536 作者:houyaowei 栏目:web开发

1、deferred的英文意思是:延期的

2、deferred的思想:当遇到处理耗时很多的js数据请求时,同步或者异步的操作都可能会碰到,客户端不能一直等待下去,这时候我们的处理思路是给该请求注册一个回调事件,等服务器有结果返回时执行。总之,deferred就是回调方法的解决方案。

3、故事背景:

    当去超市定购一台家电,因为超市暂时没货需要从别的仓库调货(这时就产生了一个deferred),货到后就会立即给配送,但是需要一个约定(promise)即购物单上需标明货物型号、产品外观、价格等等参数,如果在周转货物的过程中如果有什么意外(如周转时间太长)就应该通知客户(notify,这个通知可能是多次的,因为异步状态有多个状态的变化)。如果等到约定发货的时候如果发现和购物单上的一致,我们就认为这个promise有效,要收货签字(resolve),如果不一致就要拒签(reject)。 

4、jquery中的deferred

   该对象的引入是在jquery的1.5版本(),是通过使用jquery.Deferred()方法创建个可以链式调用的工具对象,可以注册多个回调方法到回调队列。

   (1)1.5版本前经常使用的ajax形式,返回的是XHR对象,该版本后返回的是deferred对象:

$.ajax({
    url: "test.html",
    success: function(){
      alert("success");
    },
    error:function(){
      alert("error");
    }
  });

 

   1.5版本后仍然支持上面的写法,但是1.5后可以链式操作,如下:

   $.ajax({
    url: '/path/to/file',
    type: '',
    dataType: '',
    data: {},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})


并且还可以继续添加链接方法,如下形式:

 $.ajax({
    url: '/path/to/file',
    type: '',
    dataType: '',
    data: {},
})
.done(function() {
console.log("first done");
})
.fail(function() {
})
.done(function(){
console.log("second done");
});


这时候如果我想等到两个ajax请求都返回后再去执行done、fail方法该怎么办呢?

很简单,你可以使用:

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

  .done(function(){ 

alert("两个请求都成功了!"); 

});


注:when接受的是deferred对象

    when的实现原理可以参考jquery(1.11.1)源码中的3340行到3389行


     (2)到现在咱们还没有提到resolve,reject和notify,别急,马上就开始,


要说清楚这个问题,就要引入一个新概念"执行状态"。

           jQuery规定,deferred对象有三种执行状态----未完成,已完成和已失败。

如果执行状态是"已完成"(resolved),将deferred对象的执行状态从"未完成"改为"已完              成", deferred对象立刻调用done()方法指定的回调函数,

如果执行状态是"已失败",调用fail()方法指定的回调函数,

如果执行状态是"未完成",则会触发nodify方法指定的回调函数

      例子如下:

http://jsfiddle.net/houyaowei/0jzL93j2/ 该例子立即执行done方法

http://jsfiddle.net/houyaowei/khgoqnp1/3/  reject

http://jsfiddle.net/houyaowei/ummefcLw/5/  resolve

http://jsfiddle.net/houyaowei/rcocx47a/    动态改变resolve


为了处理运行状态被动态改变的问题,jQuery提供了deferred.promise()方法。它的作用是,         在原来的deferred对象上返回另一个新deferred对象(promise),

该对象的运行状态无法被改变

promise只开放与改变执行状态无关的方法(比如done()方法和fail()方法),

屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法)

例子如下:

http://jsfiddle.net/houyaowei/b4h7we8t/2/  promise

     (3)promise的then方法:

  为了处理方便,done和fail方法合并为then方法,

  deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

    doneFilter: 为done的处理方法

             可选参数failFilter为原fail的处理方法 

   例如:

$.get( "index.html" ).then(
 function() {
alert( " succeeded" );
 }, function() {
alert( " failed!" );
 }
);


详细的API请访问 http://api.jquery.com/


欢迎拍砖,如果哪个地方描述的不合理或者讲的有错,请留言,谢谢!!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI