jQueryの$Deferred、$.when非同期操作

<!--
.article {
box-shadow: 0 3px 7px rgba(0,0,0,0.1);
border-radius: 4px;
background: #f7ebe6;
font-family:『マイクロソフト・ブラック』;・13;
margin-bottom: 20px;
}
.head {
height: 38px;
border-radius: 4px 4px 0 0;
box-shadow: 0 6px 10px -6px rgba(0,0,0,0.1);
padding-left: 20px;
color: #939393;
line-height: 38px;
font-size: 16px;
}
.con {
padding: 10px 20px 0;
line-height: 24px;
font-size: 12px;
color: #939393;
background: #fff;
}
-->
前言
ajaxがサーバデータを要求しても、すぐに結果が得られないなど、Webページには時間がかかる操作がよくあります.これらの操作が実行する後に別の操作を行う必要がある場合は、コールバック関数に$を置く必要があります.Deferredとは、jQueryがコールバック操作を処理するために使用されるものです.jQueryの$Deferred対$Callbacksは依存しています$を見てください.Callbacksはコールバックを実行します.

1     var callbacks = $.Callbacks();
2     setTimeout(function(){
3         console.log(1); // 1
4         callbacks.fire(); // 2 add        (     ，    )
5     }, 1000);
6     callbacks.add(function(){
7         console.log(2);
8     });

　　$.上の操作を実現するためにDeferred

1     var deferred = $.Deferred();
2     setTimeout(function(){
3         console.log(1); // 1
4         deferred.resolve();// 2
5     }, 1000);
6     deferred.done(function(){
7         console.log(2);
8     });

 
$.Deferredの3チーム抽象
1、resolve-》done-》$.Callbacks('once memory')-』成功-』は一度だけトリガーされます
2、reject-》fail-》$.Callbacks('once memory')-'失敗-'は一度だけトリガーされます
3、notify-》progress-》$.Callbacks('memory')-'通知-'はresolveまたはrejectまでトリガーされます.

 1     var deferred = $.Deferred();
 2     setTimeout(function(){
 3         //deferred.resolve(); // success
 4         deferred.reject(); // error
 5         //deferred.notify(); // progressing
 6     }, 1000);
 7     deferred.done(function(){
 8         console.log('success');
 9     }).fail(function(){
10         console.log('error');
11     }).progress(function(){
12         console.log('progressing');
13     });

次は興味深い使い方です.memoryの記憶機能です.

 1     var deferred = $.Deferred();
 2     setTimeout(function(){
 3         deferred.resolve();// 1
 4     }, 100);
 5     deferred.done(function(){
 6        console.log(1);
 7     });
 8     $('#btn').on('click', function () {
 9         deferred.done(function(){
10             console.log(2); // 2...              
11         });
12     });

 
deferredとpromise
　　$.Deferredにはdeferredとpromiseの2つの遅延オブジェクトがあります.deferredにはすべてのメソッドが含まれていますが、promiseには遅延オブジェクトの状態を変更する3つのメソッドresolve、reject、notifyは含まれていません.このような利点は、オブジェクトの状態が混乱しないように、オブジェクトの状態を変更する方法を提供しない場合がある.

 1     function fn(){
 2         var deferred = $.Deferred();
 3         setTimeout(function(){
 4             deferred.resolve();//     ，         。
 5         });
 6         return deferred;
 7     }
 8     var newDeferred = fn();
 9     newDeferred.done(function(){
10         console.log('success');
11     }).fail(function(){
12         console.log('error');
13     });
14     newDeferred.reject(); // error

 1     function fn(){
 2         var deferred = $.Deferred();
 3         setTimeout(function(){
 4             deferred.resolve();// success
 5         });
 6         return deferred.promise();
 7     }
 8     var newDeferred = fn();
 9     newDeferred.done(function(){
10         console.log('success');
11     }).fail(function(){
12         console.log('error');
13     });
14     newDeferred.reject(); //    reject     

 
その他の方法
1、state:遅延オブジェクトの状態を返す
pending:オブジェクト作成時のステータス
resolved:コールバック成功-失敗とnotifyのコールバックが無効になります
rejected:コールバックに失敗-成功とnotifyのコールバックは無効になります
2、always:成功しても失敗してもトリガーされます
3、then:伝達の3つの方法はそれぞれ3つの操作を処理する
4、pipe:遅延オブジェクトフィルタ?
resolve、done、reject、fail、notify、progress
$.when
1、$.when(deferred):遅延オブジェクト.
2、$.when(deferred, deferred,...):多くの遅延オブジェクトがresolve()を呼び出したときにdoneを実行します.遅延オブジェクトがreject()を呼び出すとfail()が実行されます.

 1     function fn1(){
 2         var deferred = $.Deferred();
 3         setTimeout(function(){
 4             deferred.resolve();
 5         }, 1000);
 6         return deferred.promise();
 7     }
 8     function fn2(){
 9         var deferred = $.Deferred();
10         setTimeout(function(){
11             deferred.resolve();
12         }, 1000);
13         return deferred.promise();
14     }
15     $.when(fn1(), fn2()).done(function(){
16         console.log('success'); //  resolve() success
17     }).fail(function(){
18         console.log('error'); //    reject() error
19     });

3、パラメータが遅延オブジェクトでない場合はこのパラメータをスキップして成功を表し、パラメータが遅延オブジェクトでない場合は成功し、doneが実行されます.

 1     function fn1(){
 2         var deferred = $.Deferred();
 3         setTimeout(function(){
 4             deferred.resolve();
 5         }, 1000);
 6         return deferred.promise();
 7     }
 8     $.when(fn1(), 123).done(function(){
 9         console.log('success'); // fn1()->resolve() success
10     }).fail(function(){
11         console.log('error'); // fn1()->reject() error
12     });

NOTE:成功または失敗したコールバック関数のパラメータはwhenのパラメータに対応し、パラメータが遅延オブジェクトコールバック関数であればundefinedを得、遅延オブジェクトではなくパラメータ値を得る.

 1     function fn1(){
 2         var deferred = $.Deferred();
 3         setTimeout(function(){
 4             deferred.resolve();
 5         }, 1000);
 6         return deferred.promise();
 7     }
 8     $.when(fn1(), 123).done(function(arg1, arg2){
 9         console.log(arg1);// undefined
10         console.log(arg2);//123
11         console.log('success'); // fn1()->resolve() success
12     }).fail(function(){
13         console.log('error'); // fn1()->reject() error
14     });