首页 > 编程 > JavaScript > 正文

Jquery $when done then的用法详解

2019-11-20 09:59:04
字体:
来源:转载
供稿:网友

对于$.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的用法详解,希望对大家有所帮助,如果大家对此还有疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表