동기식 아약스 호출을 시작하기 전에 javascript 코드가 실행되도록하는 방법이 있습니까

Question

여기에서 내가 뭘 잘못하고 있는지 정말로 모르겠습니다. 나는이 같은 이동 (jQuery로) 일부 자바 스크립트 가지고 :

function myFunc(){ 
    $('.wait').addClass('waiting'); 
    console.log('wait'); 
    var r = $.ajax({type: "GET", url: "my_URL", async: false}).responseText; 
    $('.wait').removeClass('waiting'); 
    console.log('stop wait'); 
    return r; 
} 

내 문제는 클래스가이 호출을 수행하는 ... 내가 무엇을 의미하는 동안 추가되지 않습니다 "대기"되었는지를 그 내 함수를 호출 할 때, 나는 처음에 나타나기로되어있는 div를 얻은 후에 제거하지만 나타나지는 않습니다. 모든 것이 그에 따라 진행되는 것처럼 보입니다. 나는 아약스 응답있어 최대 하지만 후에 만 ​​

$('.wait').removeClass('waiting'); 

내 사업부 쇼하지 않고 그것을 실행하려고 할 때 나는 시간에 요청을 시도하고 걸릴 ... 내 아약스 호출의 결과를 얻었다 대략 2 초 ... 그래서 나는 이것이 왜 일어나고 있는지 정말로 모른다.

동기식 ajax 호출과 관련 될 수 있습니까? JavaScript는 절차 언어이므로, 클래스 추가는 콘솔에 로그인하기 전에 Ajax 호출을 시작하기 전에 수행해야한다고 생각했지만 응답을 받으면 모든 수정을했습니다 (JavaScript 콘솔에서도 모든 것이 추가됩니다). 아약스 호출 후).

도움이 정말 좋을 것입니다!

Answer 1

브라우저가 기능을 실행하는 동안 아무런 변화가 없으므로 브라우저가 요소를 업데이트 할 수 있도록 비동기 코드를 사용해야합니다. setTimeout 메서드를 사용하면 브라우저에서 업데이트 할 수있는 나머지 코드를 실행할 수 있습니다.

코드가 비동기이므로 AJAX 호출을하기 전에 함수가 존재하기 때문에 함수에서 값을 반환 할 수 없습니다. 값을 얻기 위해 콜백 함수를 사용하여

function myFunc(callback){ 
    $('.wait').addClass('waiting'); 
    window.setTimeout(function(){ 
    var r = $.ajax({type: "GET", url: "my_URL", async: false}).responseText; 
    $('.wait').removeClass('waiting'); 
    callback(r); 
    }, 0); 
} 

당신이 요소를 업데이트 할 비동기 코드를 사용해야합니다, 당신은 단지뿐만 아니라 요청하는 동안 응답하지 않는 것을에서 브라우저를 유지하는 AJAX 호출 비동기를 만들 수 있습니다 :

function myFunc(callback){ 
    $('.wait').addClass('waiting'); 
    $.ajax({type: "GET", url: "my_URL", success: function(data){ 
    $('.wait').removeClass('waiting'); 
    callback(data); 
    }}); 
} 

Answer 2

여기 비동기 버전입니다. 결과를 생각할 때 콜백 함수를 전달해야한다. 주어진 상황에서는 return data이 잘못되었습니다.

function myFunc() { 
    $('.wait').addClass('waiting'); 
    console.log('wait'); 
    var r = $.ajax({ 
     type: "GET", 
     url: "my_URL", 
     async: true, 
     success: function (data) { 
      $('.wait').removeClass('waiting'); 
      console.log('stop wait'); 
      return data; 
     } 
    }) 
}