>

나는 또 다른 후 하나를 부르는 2 자바 스크립트 기능을 가지고 있습니다. 다음과 같습니다.

updateUI(event);
syncCall();
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);
}
function syncCall(){
$.ajax({
    async: false,
    dataType: 'json',
    type: 'GET',
    url: '/calls/synccall',
    success: function (json) {
      userIsSignedIn = json.is_signed_in;
    }
  });
}

나는 동기 아약스 호출하기 전에 UI 요소를 업데이트하고 있습니다. 그러나 UI 변경 사항이 표시되지 않습니다. 나는 그것이 잘 작동 코드를 디버깅 할 때.

  • 답변 # 1

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

    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 세기에 맞는 코드 작성

  • 답변 # 2

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

    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; } }); }

  • 이전 javascript - 데이터 배열에 질문 저장
  • 다음 php - 웹 후크를 통해 Woocommerce에서 Laravel으로 데이터 보내기