javascript - 동기화 아약스 호출 전에 UI가 표시되지 않음

코드가 다음과 같은 일을하고 있다고 상상할 수 있습니다

var userIsSignedIn;
updateUI(event);
syncCall();
nextThing(userIsSignedIn);
anotherThing();
moreThings();

동기화되지 않도록 syncCall을 간단히 변경하여 asyncCall이라고 함

function asyncCall(cb){
    $.ajax({
        dataType: 'json',
        type: 'GET',
        url: '/calls/synccall',
        success: function (json) {
          cb(json.is_signed_in);
        }
    });
}

이 코드를 다시가 쓴

updateUI(event);
asyncCall(function(userIsSignedIn) {
    nextThing(userIsSignedIn);
    anotherThing();
    moreThings();
});

var userIsSignedIn; 의 부족을 참고  필수

최종 사용자 경험 향상을위한 작은 변화

두 번째 대안은 async 태그가 지정된 함수로 제시 한 모든 코드를 래핑하는 것입니다

async function doThings() {
    updateUI(event);
    let userIsSignedIn = await ajaxCall(); // see below
    nextThing(userIsSignedIn);
    anotherThing();
    moreThings();
}

및 ajaxCall 에서 약속 반환  (와이즈 비는 무엇인가 )

syncCall

인터넷 익스플로러 및 이와 유사하게 "뒤로"브라우저에서 작동하는 코드를 생성하려면 바벨과 같은 변환기를 통해이를 실행하십시오

요약 : 결국 두 가지 선택이 있습니다

비동기 : 거짓을 사용하고 사용자 경험을 버리십시오

비정기 성을 받아들이고 21 세기에 맞는 코드 작성

다음과 같이 보내기 전에이 기능을 호출하십시오

function ajaxCall(){
    return $.ajax({
        dataType: 'json',
        type: 'GET',
        url: '/calls/synccall'
    }).then(json => json.is_signed_in);
}

하지 작업 시도는 다음 위의 경우

function syncCall(){
    $.ajax({
    async: false,
    dataType: 'json',
    type: 'GET',
    url: '/calls/synccall',
    beforeSend:function(){
        updateUI(event);// Call here 
    }
    success: function (json) {
      userIsSignedIn = json.is_signed_in;
    }
  });
}

updateUI(event); function updateUI(event) { formSubmitBtn = $(event.target).find('[type=submit]:not(".disabled")'); formSubmitBtn.attr('disabled', 'disabled'); var loadingText = I18n.t('Submitting'); formSubmitBtn.val(loadingText).text(loadingText); syncCall();// Try calling here } function syncCall(){ $.ajax({ async: false, dataType: 'json', type: 'GET', url: '/calls/synccall', success: function (json) { userIsSignedIn = json.is_signed_in; } }); }