다른 코드로 이동하기 전에 비동기 아약스가 완료 될 때까지 기다리시겠습니까?

Question

나는이 질문을 받았을 거라는 걸 압니다, 아마 백만 번이나, 그러나 나에게는 일을 아무것도 할 수 없습니다.

"변경된"이벤트에서 모델의 유효성을 검사하는 UI 마법사 컨트롤이 있습니다. 모델이 유효하지 않으면 사용자가 마법사에서 앞으로 이동할 수 없습니다. jquery에서 $ .when(). done() 기능을 사용하여 피곤했지만 코드가 유효한지 확인하기 전에 코드가 여전히 통과됩니다. 비동기 아약스 요청을 호출하는 이유는 UI를 잠그지 않아서 일종의 진행 표시기를 표시 할 수 있기 때문입니다. async 속성을 false로 설정했지만 내 UI 표시기가 나타나지 않습니다.

//the change event that is called when the user clicks 'next' on the wizard: 

wizard.on('change', function (e, data) { 
     var isValid = $.validate({ 
          "Model": [The_UI_MODEL], 
          "Url": [URL_To_Server_Validation], 
          "Async": true, //tells ajax request to send as async 
         }); 
     //Tells the wizard not to move 'next' if the request comes back as not valid 
     if (data.direction === 'next' && !isValid) { 

      e.preventDefault(); 
     } 
} 

JQuery와 내 시스템에 어떤 모델의 유효성을 검사하는 함수를 작성하는 // 나는 $ .extend 방법을 사용하고 있습니다 : 여기 내 코드가 무엇을하고 있는지의 예입니다.

postJson: function(options){ 
...other code for my application 
//This is where I want the ajax request to happen and once done return the data coming back 
//This is what I have tried, but it is not doing what I thought. 

$.when(function(){ 
     return $.ajax({ 
       url: options.Url, 
       type: 'POST', 
       cache: false, 
       async: options.Async, 
       timeout: options.Timeout, 
       contentType: 'application/json; charset=utf-8', 
       dataType: "json", 
       data: JSON.stringify(options.Model), 
       error: function(xhr, status, error) { 
        ...do stuff if ajax errors out 
       }, 
       success: function (data) { 

       }, 


      }); 

}).done(function(response){ 
     //looks like i get back the responseText of the request. which is fine, but other posts i have read stated i should be getting back the request itself 
...other UI stuff 
return response; 
}) 



} 

Answer 1

KarelG 절대적으로 옳다 :

validate: function(options) { 

      //Clear any previous validation errors 
      $.clearValidations(); 

      var data = $.postJson(options); 

      //the result is getting returned before the $.postJson(options) finishes 
      return data.Success; 
     } 

는 // 그래서 내가 요청 후/전에 다른 일을 할 수있는 $ 아약스 방법을 확장 내 자신의 방법을 만들었습니다. 요청의 성공 콜백 내에서 코드를 리팩토링하고 신원 확인을해야합니다. 이 같은

뭔가 ... 당신이 동기 것처럼 비동기 코드를 작성하려는 것 같습니다

wizard.on('change', function (e, data) { 

    $.ajax({ 
     url: [URL_To_Server_Validation], 
     type: 'POST', 
     cache: false, 
     async: true, 
     contentType: 'application/json; charset=utf-8', 
     dataType: "json", 
     data: {"Model": [The_UI_MODEL]}, 
     success: function (response) { 

      //Tells the wizard not to move 'next' if the request comes back as not valid 
      if(!response & data.direction === 'next') 
      { 
       e.preventDefault(); 
      } 

     } 

    }); 


}); 

Answer 2

. $ .validate()와 같은 비동기 호출은 결과없이 즉시 반환되고 나머지 코드로 계속 진행됩니다. 유효성 검사 호출이 끝났을 때 원하는 모든 작업은 전달 된 콜백 함수에서 수행해야합니다.

jQuery promises (when, then, done 등) 또는 async.js과 같은 다른 라이브러리를 사용하면 제어 흐름을 쉽게 관리 할 수 ​​있습니다.

또한 아직 브라우저에 대한 지원이 거의 없으므로 유용하지는 않지만 yield 연산자와 Task.js과 같은 라이브러리는 결국 비동기 코드를 동기식으로 작성하게합니다.