Jquery-$when-done-then的用法详解.doc

　　这篇文章主要介绍了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里也需要被看到，这就类似于方法的回调技术！
　　在使用ＭＶＶＭ的KO上，更加得心应手，感觉$.when就是为了Knockoutjs而产生的！
　　//ＭＶＶＭ数据绑定
　　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的用法详解，希望对大家有所帮助