$.Deferred의 기본 사용

Jquery에서 비동기 리셋 함수 관리 도구의 $를 비교합니다.Callbacks, 비동기식 리셋 함수를 보다 쉽게 관리할 수 있는 도구가 있습니다. 이것은 상태가 있는 방법입니다. $.Deferred. $에 대해 잘 모르면Callbacks 방법, 제 이전 글을 보시기 바랍니다. Callbacks 기본 사용
$.Deferred
콜백 함수를 보다 잘 구분하기 위해 jquery 내부에서 Deferred 객체에 함수를 등록하고 호출하는 세 가지 방법을 정의합니다.
타입
등록!
호출
성공 상태
$.Deferred.done(fn)
$.Deferred.resolve
실패 상태
$.Deferred.fail(fn)
$.Deferred.매개 변수
진행 상태
$.Deferred.progress(fn)
$.Deferred.notify (매개 변수)
본질적으로done과fail의 원리는 같다. 함수 이름을 통해 더욱 잘 구분하기 위해서이다. 성공과 실패의 리셋 함수는 프로그레스와 구별된다. 프로그레스 상태의 함수는done이나fail의 리셋 조건에 도달할 때까지, 프로그레스 상태의 함수는done이나fail의 리셋 조건에 도달할 때까지, 현재의 리셋 임무를 중지한다.
사례:

<script>
    //     
    var master = function(){
        console.log('     ')
    }
    var good = function(){
        console.log('   ')
    }
    var loser = function(){
        console.log('    ')
    }

    //   deferred  
    var deferred = $.Deferred()
    //            
    deferred.done(master)
    //            
    deferred.fail(loser)
    //            
    deferred.progress(good)

    //          ,         
    var timer = setInterval(function(){
        var num = Math.random()*100
        if(num > 85){
            //       
            deferred.resolve()
        }else if(num < 60){
            //       
            deferred.reject()
        }else{
            //       
            deferred.notify()
        }
    },1500)

</script>

상기 사례의 deferred 대상은 전역적이고resolve,reject,notify는 전역적으로 직접 호출될 수 있기 때문에 이것은 불합리하다.resolve,reject,notify 이 세 개의 트리거 함수는 반드시 특정한 조건에서만 호출할 수 있기 때문에, 외부 등록 함수만 허용하고 호출 함수는 허용하지 않습니다.케이스 변경 사항은 다음과 같습니다.

<script>
    //     
    var master = function(){
        console.log('     ')
    }

    var good = function(){
        console.log('   ')
    }

    var loser = function(){
        console.log('    ')
    }

    var asyn = function(){
        //   deferred  
        var deferred = $.Deferred()
        //          ,         
        setInterval(function(){
            var num = Math.random()*100
            if(num > 85){
                //       
                deferred.resolve()
            }else if(num < 60){
                //     
                deferred.reject()
            }else{
                //      
                deferred.notify()
            }
        },1500)

        return deferred.promise()

    }

    //  promise
    var deferred = asyn() 

    //            
    deferred.done(master)
    
    //            
    deferred.fail(loser)

    //            
    deferred.progress(good)
    
</script>

등록 함수 쓰기 간소화:then
원래:

    //            
    deferred.done(master)
    //            
    deferred.fail(loser)
    //         
    deferred.progress(good)

단순화:

	//     ：  ，  ，      
    deferred.then(master,loser,good)    

체인 호출then

  //   ：
  deferred.then(master,loser,good) 
  .then(fn1,fn2,fn3)
  .then(fn1,fn2,fn3)    

체인 호출의 전제는 지난then이promise 대상을 되돌려주는 것이다.
사례:

<script>
    //     
    var master = function(){
        console.log('     ')
        return asyn()
        //                  promise
    }

    var good = function(){
        console.log('   ')
        return asyn()
        //                  promise
    }

    var loser = function(){
        console.log('    ')
        return asyn()
        //                  promise
    }

    var asyn = function(){
        //   deferred  
        var deferred = $.Deferred()
        //          ,         
        setInterval(function(){
            var num = Math.random()*100
            if(num > 85){
                //       
                deferred.resolve()
            }else if(num < 60){
                //     
                deferred.reject()
            }else{
                //      
                deferred.notify()
            }
        },1500)
        
        return deferred.promise()
    }

    //  promise
    var deferred = asyn() 

    deferred.then(master,loser,good).then(master,loser,good)
    //       

</script>