진행하기 전에 AJAX가 완료 될 때까지 기다려주십시오

Question

내 문제를 찾고있는 AJAX 스레드를 찾았지만 제 경우에 대한 해결책을 찾지 못했습니다. 여기에 문제가 있습니다 :

나는 사용자 의견이있는 페이지가 있습니다. 이러한 주석은 데이터베이스에 저장되며 사용자가 "새로 고침"버튼을 누를 때마다 데이터베이스에 대한 연결이있어 주석을 응답으로받습니다. 새 메시지가있는 경우 "새 메시지가 있습니다"라는 div가 있습니다. 그러나이 마지막 메시지는 메시지가로드되기 전에 전에 으로 표시되기 때문에 제대로 표시되지 않습니다.

function GetComments() 
{ 
    $("#cont-comment").empty(); //div that contains the messages 
    $.ajax(
    { 
     url: "get.php", 
     dataType: "json", 
     success: function(data) 
     { 
      n_msg=data.length; 
      for (i=0; i<n_msg; i++) 
      { 
       nick=data[i].nick; 
       msg=data[i].msg; 
       WriteNewComment(nick,msg); 
       num_comments=document.getElementsByClassName("comment-msg").length; 
      } 
     } 
    }); 
} 

그리고 여기에 문제의

AJAX 기능 :

여기에 코드입니다.

$("#refresh").click(function() 
{ 
    num_comments_before=num_comments; 
    GetComments(); 
    alert("done"); 
}); 

"완료되었습니다"라는 메시지가 새 설명 앞에 나타납니다. AJAX가 끝나면 새로운 댓글이 나타날 때만 "완료"라는 메시지가 나타납니다.

Answer 1

추가하는 경우 :

비동기 :

거짓을하여 Ajax 호출하려면 자바 스크립트 계속하기 전에 (성공 또는 오류) 반환 아약스 기능을 기다립니다. 아약스는 비동기 호출이기 때문에

http://api.jquery.com/jquery.ajax/

Answer 2

는, 브라우저는 "완료"메시지가 새 코멘트를 앞에 나타나는 이유입니다, 바로 당신이 아약스 전화를하고 그 흐름을 계속 스레드를 생성합니다. 엄격하게 요구되지 않는 한 이상적으로 코드를 차단해서는 안됩니다. 아래 그림과 같이 jQuery를 제대로 Promises/A spec을 준수하지 않지만

당신은 ... 다시

function GetComments(alertFunction) 
{ 
    $("#cont-comment").empty(); //div that contains the messages 
    $.ajax(
    { 
     url: "get.php", 
     dataType: "json", 
     success: function(data) 
     { 
      n_msg=data.length; 
      for (i=0; i<n_msg; i++) 
      { 
       nick=data[i].nick; 
       msg=data[i].msg; 
       WriteNewComment(nick,msg); 
       num_comments=document.getElementsByClassName("comment-msg").length; 
      } 

      **alertFunction();** 
     } 
    }); 
} 



$("#refresh").click(function() 
{ 
    num_comments_before=num_comments; 
    GetComments(alertFunction); 

}); 

function alertFunction(){ 
    alert("done"); 
} 

Answer 3

를 호출 경보 ('다') 함수를 호출 할 수 있으며, $.ajax() 방법은 deferred object 반환을 응답 논리를 처리하는 데 사용할 수 있습니다. 여기가 일할 수있는 하나의 방법입니다 :

$.when(getComments).then(processComments); 

function getComments() { 
    $("#cont-comment").empty(); 
    return $.ajax({ 
     url: "get.php", 
     dataType: "json", 

    }); 
} 

function processComments(data) { 
    n_msg=data.length; 
    for (i=0; i<n_msg; i++) { 
     nick=data[i].nick; 
     msg=data[i].msg; 
     WriteNewComment(nick,msg); 
     num_comments=document.getElementsByClassName("comment-msg").length; 
    } 
    alert("done"); 
} 

는 자바 스크립트에 관해서는 동 기적으로 일반적으로 모범 사례 간주되지 않는 일을 수행하고, 콜백 방식은 OK이지만 다중 중첩 광기와 귀찮은 오류 처리에서 겪고있다.

Answer 4

위의 의견은 정확합니다. 콜백에서 업데이트해야합니다. 코드에 대한 몇 가지 의견을 전하십시오. 변수는 항상 var이어야합니다. 그렇게하지 않으면 자바 스크립트에서 전역 범위에 변수를 추가합니다 (나쁜 것입니다!). 또한 Allman 스타일을 사용하면 때때로 문제가 발생할 수 있으므로 K & R 스타일 중괄호 (새 줄이 아닌 같은 줄에 열림)를 사용하는 것이 가장 좋습니다. link to article

더 현대적인 방법을 사용하려면 jquery $.when과 .done()을 ajax 호출에 사용하는 것이 좋습니다.

$.when(GetComments()).done(function(data){ 
    var n_msg = data.length, i=0, nick, msg, num_comments=0; 
    n_msg = data.length; 
    for (; i<n_msg; i++) { 
    nick = data[i].nick; 
    msg = data[i].msg; 
    WriteNewComment(nick,msg); 
    num_comments=document.getElementsByClassName("comment-msg").length; 
    } 
    alert('done'); 
});