1. 程式人生 > >jquery deferred物件 then(),when()方法 ,解決回撥函式巢狀

jquery deferred物件 then(),when()方法 ,解決回撥函式巢狀

曾經做過一個註冊頁,很多的AJAX介面,多個分支,層層巢狀,感覺程式碼特別難看,都說Promise/A+規範可以解決這個問題,而現在主流框架都實現了這個規範,於是就去研究了一下。發現可以使用deferred物件,然後的就是除錯,除錯,再除錯,感覺可以用下面的思路來解決我的問題。另外需要說一下,我使用的jquery是1.9的,如果使用1.12以後的版本好像defferred物件改動挺大的吧

<script type="text/javascript">
$(document).ready(function() {
var aa = $.Deferred();
var bb = $.Deferred();
var cc = $.Deferred();
/*先說一下then方法的使用*/
/*第一個deferred物件,並定義其成功或失敗的回撥函式*/
aa
.then(function(param1){
/*成功的回撥函式*/
var param2 = '1st success params';
/*在這裡決定呼叫第二個defferred物件的哪一個回撥函式,這裡呼叫的是成功的,並傳入引數*/
bb.resolve(param2);
},function(param1){
/*失敗的回撥函式*/
var param2 = '1st fail params';
});
bb
.then(function(param2){
console.log(param2);
/*在這裡決定呼叫第三個defferred物件的哪一個回撥函式,這裡呼叫的是失敗的,並傳入引數*/
var param3 = '2st success params';
cc.reject(param3);
},function(param2){
console.log(param2);
});
cc
.then(function(param3){
console.log(param3);
},function(param3){
console.log(param3);
/*回撥函式鏈進行到這裡*/
});
setTimeout(function(){
/*回撥函式鏈的開始入口,這裡呼叫了第一個defferred物件的成功回撥,並傳入第一個引數*/
aa.resolve(param1);
},1000);
/*然後是when方法的使用*/
$.when(aa,bb).done(function(param1,param2){
/*when是當傳入非同步操作都成功的時候執行的函式,但是後面也可以接then方法,那就可以定義成功和失敗兩個回撥函式*/
console.log('aa和bb都成功了');
console.log(param1);
console.log(param2);
});
});
</script>