Jquery $when done then的用法详解

 更新时间:2016年05月20日 14:45:04   作者:张占岭  
这篇文章主要介绍了Jquery $when done then的用法详解的相关资料,本文还通过一个例子给大家介绍jquery when then(done) 用法,需要的朋友可以参考下

对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when...done...fail...then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱

$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
}
}
}

而它实现的功能无非就是外层执行完成后,去执行内层的代码代码,看下面的$.when写法,就清晰多了

$.when($.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
alert(JSON.stringify(data));
}
})).done(function (data) {
alert(data[0].Name);
}).done(function (data) {
alert(data[1].Name);
}).fail(function () {
alert("程序出现错误!");
}).then(function (data) {
alert("程序执行完成");
});

而对于这种ajax的封装,在比较流行的node.js里也需要被看到,这就类似于方法的回调技术!

在使用MVVM的KO上,更加得心应手,感觉$.when就是为了Knockoutjs而产生的!

//MVVM数据绑定
var MyModel = new model();
$.when($.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
MyModel.PeopleList = ko.observableArray(data);//先为对象赋值
}
})).done(function (data) {
ko.applyBindings(MyModel);//再绑定对象
}); 

以后我们在进行前端开发时,应该多使用这种顺序的,平行的代码段,而少用嵌套的代码段,这只是大叔个人的见解。

下面通过一个例子再给大家介绍jquery when then(done) 用法

//运行条件jquery 1.82以上,直接运行代码,看结果

var log = function(msg){ 
window.console && console.log(msg) 
} 
function asyncThing1(){ 
var dfd = $.Deferred(); 
setTimeout(function(){ 
log('asyncThing1 seems to be done...'); 
dfd.resolve('1111'); 
},1000); 
return dfd.promise(); 
} 
function asyncThing2(){ 
var dfd = $.Deferred(); 
setTimeout(function(){ 
log('asyncThing2 seems to be done...'); 
dfd.resolve('222'); 
},1500); 
return dfd.promise(); 
} 
function asyncThing3(){ 
var dfd = $.Deferred(); 
setTimeout(function(){ 
log('asyncThing3 seems to be done...'); 
dfd.resolve('333'); 
},2000); 
return dfd.promise(); 
} 
/* do it */ 
$.when( asyncThing1(), asyncThing2(), asyncThing3() ).done(function(res1, res2, res3){ 
log('all done!'); 
log(res1 + ', ' + res2 + ', ' + res3); 
})

以上所述是小编给大家介绍的Jquery $when done then的用法详解,希望对大家有所帮助,如果大家对此还有疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

相关文章

  • jQuery实现弹窗居中效果类似alert()

    jQuery实现弹窗居中效果类似alert()

    本文给大家分享基于jquery实现弹窗居中效果类似于alert(),代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-02-02
  • jQuery的css()方法用法实例

    jQuery的css()方法用法实例

    这篇文章主要介绍了jQuery的css()方法用法,以实例形式较为详细的分析了css()方法的几种常见用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery实现的上拉刷新功能组件示例

    jQuery实现的上拉刷新功能组件示例

    这篇文章主要介绍了jQuery实现的上拉刷新功能组件,涉及jQuery事件响应与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2020-05-05
  • 升级到jQuery 3.6.1遇见的一些坑以及应对办法

    升级到jQuery 3.6.1遇见的一些坑以及应对办法

    Jquery低版本存在安全漏洞,所以需要升级版本,下面这篇文章主要给大家介绍了关于升级到jQuery 3.6.1遇见的一些坑以及应对办法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • jQuery实现简单的网页换肤效果示例

    jQuery实现简单的网页换肤效果示例

    这篇文章主要介绍了jQuery实现简单的网页换肤效果,涉及jQuery事件响应及页面元素属性动态变换操作技巧,需要的朋友可以参考下
    2016-09-09
  • JQuery在光标位置插入内容的实现代码

    JQuery在光标位置插入内容的实现代码

    IE下可以通过 document.selectIOn.createRange ();来实现,而Firefox(火狐)浏览器则 需要首先获取光标位置,然后对value进行字符串截取处理
    2010-06-06
  • jQuery简单创建节点的方法

    jQuery简单创建节点的方法

    这篇文章主要介绍了jQuery简单创建节点的方法,涉及jQuery获取节点及append添加元素创建节点的相关技巧,需要的朋友可以参考下
    2016-09-09
  • JQuery动态添加和删除表格行的方法

    JQuery动态添加和删除表格行的方法

    这篇文章主要介绍了JQuery动态添加和删除表格行的方法,实例分析了jQuery中动态操作表格行的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • Jquery阻止事件冒泡 event.stopPropagation

    Jquery阻止事件冒泡 event.stopPropagation

    帮朋友写了一个小效果,单击标签后标签变色并添加一个叉的图片,点击叉标签恢复原样,具体效果请点击下面的result
    2011-12-12
  • JQuery Highcharts 动态生成图表的方法

    JQuery Highcharts 动态生成图表的方法

    动态图表生成方法有很多,在接下来的文章中将为大家介绍下使用JQuery Highcharts是如何实现的
    2013-11-11

最新评论