jquery的deferred使用详解

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

前言

之前在一篇文章中写过一点when方法的使用，最近看到同事的一篇文章，又详细学习了deferred方法的各种使用技巧。特此总结。

---

简单介绍

deferred对象就是jQuery的回调函数解决方案，jQuery之前的版本在异步回调这一块做得不是很好，所以后期加上了该解决方案。

---

普遍的ajax操作


我们先来回顾一下jQuery中普通的ajax操作：


$.ajax({
    url: "test.html",
    success: function(){
        alert("哈哈，成功了！");
    },
    error:function(){
        alert("出错啦！");
    }


});


1.5版本后的新写法如下：


$.ajax("test.html")
    .done(function(){ alert("哈哈，成功了！"); })


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


新版本的写法相比老版本有一个优势，就是可以自由添加多个回调函数,他们按照添加顺序执行：


$.ajax("test.html")
    .done(function(){ alert("哈哈，成功了！");} )
    .fail(function(){ alert("出错啦！"); } )
    .done(function(){ alert("第二个回调函数！");} );


为多个ajax指定回调函数


我们可以通过when方法，为多个事件指定一个回调函数，这就是我之前在项目中的使用需求：


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


只有当两个ajax请求都成功之后，才会运用done方法。


为普通操作指定回调函数


前面说到的when是用于ajax方法，而ajax方法其实是deferred对象，如果不是ajax方法，而是普通的函数呢？如果直接像上面一样使用when，是不会有效果的，会直接执行done方法。


所以我们需要手动新建一个deferred对象：


var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){


    var tasks = function(){


        alert("执行完毕！");


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


    };


    setTimeout(tasks,5000);


    return dtd;


};


这里的resolve就是触发done的，对应的reject方法则是用来调用fail方法的。




var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){


    var tasks = function(){


        alert("执行完毕！");


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


    };


    setTimeout(tasks,5000);


    return dtd;


};


$.when(wait(dtd))


    .done(function(){ alert("哈哈，成功了！"); })


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


进一步优化


上面的代码有一些问题，就是dtd对象是暴露在全局的，所以我们可以通过在全局进行dtd.resolve()来提前回调。


为了避免这种情况，jQuery提供了deferred.promise()方法，它的作用是，在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done方法和fail方法）屏蔽与改变执行状态有关的方法（比如resolve和reject方法）。


var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){


    var tasks = function(){


        alert("执行完毕！");


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


    };


    setTimeout(tasks,5000);


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


};


var d = wait(dtd); // 新建一个d对象，改为对这个对象进行操作


$.when(d)


    .done(function(){ alert("哈哈，成功了！"); })


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


d.resolve(); // 此时，这个语句是无效的


当然，我们也可以把dtd包在函数内：


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("出错啦！"); });

转载地址：http://blog.csdn.net/mevicky/article/details/51259543

var dtd = $.Deferred(); // 新建一个Deferred对象
  var wait = function(dtd){
  var map = new BMap.Map("allmap");
  var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){
$("#curLongitude").val(r.point.lng);
$("#curLatitude").val(r.point.lat);
$("#curProvince").val(r.address.province);
$("#curCity").val(r.address.city);
console.log('您的位置：'+r.point.lng+','+r.point.lat);
$("#txt1").val('您的位置：'+r.point.lng+','+r.point.lat);
setTimeout(function(){
console.log(1)
dtd.resolve(); // 改变Deferred对象的执行状态
},5000);

}else {
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true});
  return dtd;
  }
$.when(wait(dtd)).done(function(){ console.log("哈哈，成功了！"); })