jQuery的deferred对象详解

为异步操作指定回调函数,jQuery开发团队就设计了deferred对象。

简单说,deferred对象就是jQuery的回调函数解决方案。

1 ajax操作的链式写法

ajax传统写法:

$.ajax({

url:'test.html',

success:function(){},

error:function(){}

});

$.ajax() 操作完成之后,如果使用的是低于1.5的版本,返回的是XHR对象,没法进行链式操作,高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

$.ajax('test.html').done(function(){}).fail(function(){});

done 相当于success方法 fail相当于error方法

2 可以为同一操作指定多个回调函数

$.ajax('test.html').done(function(){}).fail(function(){}).done(function(){});

回调函数可以添加任意多个,它们按照添加顺序执行。

3 为多个操作指定回调函数

$.when($.ajax("test1.html"), $.ajax("test2.html")).done(function(){ alert("哈哈,成功了!"); }).fail(function(){ alert("出错啦!"); });

这段代码的意思是,先执行两个操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

$.when(wait()).done(function(){ alert("哈哈,成功了!"); }).fail(function(){ alert("出错啦!"); });

$.when()的参数只能是deferred对象。所以wait()执行之后必须返回一个deferred对象,才可以实现预期的效果,不然直接就执行done回调了。

var dfd=$.Deferred();

var wait=function(dfd){

var test=function(){ alert('执行完毕!'); dfd.resolve(};

setTimeout(test,10000);

return dtd.promise();

}

$.when(wait(dfd)).done(function(){ alert("哈哈,成功了!"); }).fail(function(){ alert("出错啦!"); });   这样就可以实现预期的效果

dtd是一个全局对象,所以它的执行状态可以从外部改变,jQuery提供了deferred.promise()方法。

它的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。

不过最好是把defererd写成内部对象

var wait = function(dtd){

    var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象

    var tasks = function(){

      alert("执行完毕!");

      dtd.resolve(); // 改变Deferred对象的执行状态

    };

    setTimeout(tasks,5000);

    return dtd.promise(); // 返回promise对象

  };

  $.when(wait())

  .done(function(){ alert("哈哈,成功了!"); })

  .fail(function(){ alert("出错啦!"); });

来自:https://www.cnblogs.com/tiancai/p/5817996.html

原文地址:https://www.cnblogs.com/xiaofenguo/p/10490956.html