标签:style blog http io color ar os 使用 sp
近日做内部推荐项目,在进入项目首页时,需要进行预调用接口判断,按照以往的习惯,应该将调用接口后执行的代码,放入ajax请求success内执行。这样当然可以,但是代码组织和可读性都没有那么高。通过查看Jquery官网api发现了deferred object(延迟对象)这个概念。
一、API文档的翻译:
延迟对象,在jquery1.5被引入,是调用jQuery.Deferred()方法生成的一个链式功用对象。它可以注册多个回调到回调队列,提取回调队列,传递任何异步或同步函数的成功或失败状态。
延迟对象是一个链式的,类似于jquery对象的链式,但是它有自己的方法。在创建之后,你可以用任何下面涉及到的方法,无论是直接链式调用,还是保存这个对象到变量,并在这个变量上调用一个或多个方法。
二、延迟对象分析与使用:
不难得出结论,以上API包括了延迟对象的构建、延迟状态设定方法、延迟状态监听方法。
延迟对象的数据结构
延迟对象包括三种状态:resolved(已解决)、rejected(未解决)、progress(进行中)。这三种状态可以用延迟对象state方法实时查看。
延迟对象状态查看
延迟对象是jquery的回调函数解决方案,延迟顾名思义就是延迟到未来某个点再执行,类似jquery 动画函数中delay方法,区别在于后者是延迟固定时间,延迟对象则是通过固定状态判断延迟执行的时机。
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("出错啦!"); });
上述代码例子,延迟对象定义为一个全局对象,这样就会造成延迟状态,可以在任何时间进行更改。
改进的方法一:
var dtd = $.Deferred(); // 新建一个Deferred对象 var wait = function(dtd){ var tasks = function(){ alert("执行完毕!"); dtd.resolve(); // 改变Deferred对象的执行状态 }; setTimeout(tasks,5000); return dtd.promise(); // 返回promise对象,promise对象只开放与状态无关的方法,即那三种状态方法不开放,无法设置 }; var d = wait(dtd); // 新建一个d对象,改为对这个对象进行操作 $.when(d) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); }); d.resolve(); // 此时,这个语句是无效的
改进方法二:
将延迟对象构建成函数内部的局部变量,这样更好的实现了封装,防止外部对状态进行改变。
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("出错啦!"); });
直接将函数名作为$.Deferred()参数传入,$.Deferred()所生成的延迟对象会作为wait函数参数传入函数。
var wait = function(dtd){ var tasks = function(){ alert("执行完毕!"); dtd.resolve(); // 改变Deferred对象的执行状态 }; setTimeout(tasks,5000); return dtd.promise(); // 返回promise对象 }; $.Deferred(wait) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); });
三、项目使用情况:
乐帝在内推项目中使用的是第二种方法,即将延迟对象作为局部变量定义,并返回promise对象。这里promise对象与延迟对象除了不能改变状态,对延迟状态的记录及监听方法都相同。
function loadInternalHost() { var dtd = $.Deferred(); dtd.resolve(); return dtd.promise();//在原defferred对象上返回另一个deferred对象,两个对象都会记录最初deferred对象状态,但后者不能改变状态,其他方法一致 }
promise对延迟状态的记录
当分别调用两个接口时,延迟监听函数允许为多个事件指定一个回调。
如下代码,分别取得内推城市及内推公告两部分数据后,执行后续加载数据的动作。
$.when(getInternalRecommendCitys(), getComment()).done(function () { getInternalRecommendJobAdList(oldSearchData.keyWord, oldSearchData.locId); }); function getInternalRecommendCitys() { var dtd = $.Deferred(); $.ajax({ type: "get", data: { "openId": openId }, dataType: "json", url: "../api/InternalInfo/InternalRecommendCitys", success: function (data) { $city = $("#citySelect"); for (var i = 1; i < data.length; i++) { $str = $("<option></option>"); $str.text(data[i].name); $str.val(data[i].value); $city.append($str); dtd.resolve(); }//将可选城市导入到选择列表 }, error: function () { dtd.resolve(); } }); return dtd.promise(); } function getComment() { var dtd = $.Deferred(); $.ajax({ type: "get", data: { "openId": openId }, dataType: "json", url: "../api/InternalInfo/GetComment", success: function (data) { $(".notice-content pre").html(data.data); dtd.resolve(); }, error: function () { dtd.resolve(); } });//获取公告数据 return dtd.promise(); }
标签:style blog http io color ar os 使用 sp
原文地址:http://blog.csdn.net/yingyiledi/article/details/41113249