jQuery의 $.Deferred、$.비동기 동작

전언
웹 페이지에서 aax가 서버 데이터를 요청하는 등 비교적 긴 시간이 걸리는 동작이 자주 나타나는데, 이러한 조작은 즉각 결과를 얻을 수 없다.만약 우리가 이 조작을 실행한 후에 다른 조작을 해야 한다면, 우리는 이 조작들을 리셋 함수에 두어야 한다. $.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 두 개의 지연 대상이 있습니다.deferred는 모든 방법을 포함하고,promise는 지연 대상의 상태를 바꾸는 세 가지 방법인 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: 전달 세 가지 방법으로 각각 세 가지 조작을 처리한다.
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     });

jQuery의 $.Deferred、$.비동기 동작

좋은 웹페이지 즐겨찾기