JQuery를 사용하는 방법 $ .when

Question

나는 $ .when와 $ .Deferred의 여섯 가지 변형을 보았고 시도했지만 제대로 작동하지 않습니다. 아래 코드는 다음을 수행해야합니다 :

1.) 사용자가 로그인 기능을 호출하는 로그인을 클릭합니다.

2.) 로그인은 서버에서 콜백을 실행해야하는 renderNavbar를 호출합니다.

3. renderNavbar가 데이터를 검색하고 renderNavbar가 #navbar의 html 속성을 설정 한 후 로그인하면 toggleLoginState를 호출해야합니다.

실제로 로그인 호출이 발생합니다. renderNavbar는 renderNavbar 내에서 콜백을 기다리지 않고 즉시 toggleLoginState를 호출합니다. 이 문제를 어떻게 해결합니까 ?? (BTW renderNavbar 및 toggleLoginState는 코드의 다른 위치에서 서로 독립적으로 호출되며 다른 하나는 직접 호출 할 수 없습니다.)

var app = { 

this.login = function() { 
    $.when(app.renderNavbar()).done(app.toggleLoginState(1)); // wrong does not work 


} 


this.renderNavbar = function() 
{ 
    return $.when($.get('/Home/Navbar')).done(function (data) { 
     $('#navbar').html(data); // this line must complete before the call the to toggleLoginState is made 
    }); 
} 

this.toggleLoginState = function (state) 
{ 
    if (state == 1) {// yada} // this line should execute after #navbar is set 
} 

} 

Answer 1

코드 어디서나 $.when을 사용할 필요가 없습니다. $.get은 done을 직접 호출 할 수 있다는 약속을 반환합니다. 그 약속을 다시 끝내는 것뿐입니다. 동일한 약속이 renderNavbar에서 반환되고 세 번째로 시간이 $.when으로 바뀝니다.

실제로 근본적인 문제는 코드를 즉시 호출하고 done에 반환 값을 전달하면 콜백 함수를 done으로 전달하지 않는다는 것입니다.

귀하의 코드가 기능로, 다음과 같아야는 done에 전달되는 :

this.renderNavbar = function() { 
    return $.get('/Home/Navbar').done(function (data) { 
     $('#navbar').html(data); // this line must complete before the call the to toggleLoginState is made 
    }); 
} 


this.login = function() { 
    app.renderNavbar().done(function() { 
     app.toggleLoginState(1)); 
    }); 
} 

의 차이는 당신이하고있는 것입니다 ....

// invoke doSomething() immediately, pass return value to done 
$(...).done(doSomething()) 

당신이 필요로 할 때 이렇게하려면 :

// give done a function to invoke in the future 
$(...).done(function() { doSomething() });