jquery-deferred應用

咱們說jquery1.5以後用的用deferred，那麼deferred究竟是個什麼東西，看個例子

var wait = function(){
　　var task = function(){
　　　　console.log('執行完成');
　　}
　　setTimeout(task, 2000);
}
wait();

如今在task裏面的執行完成以後進行某些特別複雜的操做，代碼可能會不少。那麼要這麼怎麼辦。若是繼續在下面寫也沒有問題，可是不符合開放封閉的原則。後面頗有可能屢次再改這一大堆的代碼。對修改開放，對拓展關閉。咱們須要實現對修改關閉，對拓展開放。

 

爲了解決這個問題，咱們引入jquery的deferred

function waitHandle(){
　　var dtd = $.Deferred(); // 建立一個deferred對象

　　var wait = function(dtd){ // 要求傳入一個 deferred對象
　　　　var task = function(){
　　　　　　console.log('執行完成');
　　　　　　dtd.resolve(); // 表示異步任務已經完成
　　　　　　// dtd.reject(); // 表示異步任務失敗或出錯
　　　　}
　　　　setTimeout(task, 2000);
　　　　return dtd; // 要求返回deferred對席那個
　　}

　　// 注意，這裏必定要有返回值
　　return wait(dtd);
}

這裏面有三層函數，第一層函數是waitHandle，第二層是wait函數，第三層是task函數。這裏有兩個return，第一個傳進did。而後進行一系列加工，返回了dtd。而後最終怎麼用

 

var w = waitHandle();
w.then(function(){
　　console.log('success1');
},function(){
　　console.log('error');
})
.then(function(){
　　console.log('success2')
},function(){
　　console.log('error2')
});
// 還有w.done 和 w.fail

 

總結，dtd的api可分紅兩類，用意不一樣

第一類：dtd.resolve dtd.reject

第二類：dtd.then dtd.done dtd.fail

這兩類應該分開，不然後果很嚴重！

好比在上面代碼最後執行dtd.reject()。試一下後果。。

function waitHandle(){
　　var dtd = $.Deferred(); // 建立一個deferred對象

　　var wait = function(dtd){ // 要求傳入一個 deferred對象
　　var task = function(){
　　　　console.log('執行完成');
　　　　dtd.resolve(); // 表示異步任務已經完成
　　　　// dtd.reject(); // 表示異步任務失敗或出錯
　　}
　　setTimeout(task, 2000);
　　　　return dtd; // 要求返回deferred對席那個
　　}

　　// 注意，這裏必定要有返回值
　　return wait(dtd);
}

var w = waitHandle();
w.reject() // 很是不老實的作法
w.then(function(){
　　console.log('success1');
},function(){
　　console.log('error');
}).then(function(){
　　console.log('success2')
},function(){
　　console.log('error2')
});

 

那麼怎麼解決這個問題呢，也就引出了最最重要的角色，很是相似於promise；

function waitHandle(){
　　var dtd = $.Deferred(); // 建立一個deferred對象

　　var wait = function(dtd){ // 要求傳入一個 deferred對象
　　　　var task = function(){
　　　　　　console.log('執行完成');
　　　　　　dtd.resolve(); // 表示異步任務已經完成
　　　　　　// dtd.reject(); // 表示異步任務失敗或出錯
　　　　}
　　　　setTimeout(task, 2000);
　　　　return dtd.promise(); // 這裏返回promise，而不是直接返回deferred
　　}

　　// 注意，這裏必定要有返回值
　　return wait(dtd);
}


var w = waitHandle();
w.then(function(){
　　console.log('success1');
},function(){
　　console.log('error');
}).then(function(){
　　console.log('success2')
},function(){
　　console.log('error2')
});

雖然這裏promise()方法的調用，但已經把promise最初的概念提出來了，這仍是jquery1.5的時候。返回promise之後，這個時候去b同窗去改w.reject()會報錯。返回promise後，只能用監聽的方法then,done,fail，不能去改resolve,reject。監聽是其餘同窗惟一的權利。