[jQuery]Ajax가 끝나고 진행하기, Ajax 동기화

# Ajax 동기화

async: false 를 해주면 된다.

# 상황

비밀번호를 이메일을 통해 찾게 해주려고 한다.

이메일 확인과 검증이 끝나고 flag가 true일 경우 (회원 계정 내 존재하는, 올바른 이메일일 경우) 이메일을 보내주도록 한다.

이 때, 이메일 확인과 검증은 Ajax로 수행되고 결과가 올바르면 flag를 true로, 아니라면 false로 바꿔준다.

결과로 나온 flag를 통해 true일 경우, 해당 이메일에 비밀번호를 보내준다.

 

# 문제

Ajax 내에서는 올바른 결과를 출력하는데, 비동기 방식이라 Ajax의 결과로 flag를 true로 바꾸기 전에 flag를 확인하여 문제가 생긴다.

 

# 해결

Ajax를 동기화 방식으로 바꾼다. Ajax가 끝나고 다음 코드로 넘어가므로 검증이 끝나고 flag를 확인하게 된다.

Ajax에 async: false를 붙여주면 된다.

      function emailValidTest(email){
       $.ajax({
        url: "emailCheck",
        type: "get",
        data: { "email" : email },
       async: false,
        success: function(data){
         if(data == "1"){
          //no exist
          emailMsg.html("존재하지 않는 이메일입니다.");
         }else if(data == "-1"){
          emailMsg.html("");
          emailValidFlag = true;
          console.log("결과는 : "+emailValidFlag);
         }
        },
        error: function(){
         alert("error");
        }
       })
      }