jQuery ajax가 호출 중일 때 화면이 새로 고침되지 않습니다.

Question

관련이 있거나 다를 수있는 두 가지 화면 새로 고침 문제가 있습니다. 내가 분명히 재현 할 수있는 것은 일련의 아약스 호출을 만드는 것입니다. 각 호출 사이에 jQuery 대화 상자 내의 텍스트를 업데이트하여 진행 상황을 표시합니다. 과정이 끝나면 대화 상자를 숨 깁니다.

디버깅 패널을 사용하여 Chrome에서이 코드를 실행하고 각 ajax 호출 전후에 중단 점을 배치하면 대화 상자가 제대로 업데이트됩니다. 방금 코드를 깨지 않고 실행하면 화면이 전혀 새로 고쳐지지 않습니다.

나는 각 아약스 호출 사이에 대기 루프를 도입하려했지만 문제가 해결되지 않았다. 여기에 코드의 아래로 편집 된 버전은 다음과 같습니다

$('#saving').show(); 
$('#savingSpan').text('Saving Analysis'); 
$('#savingReport').text('Saving Header: '); 
$('#savingInputs').text('Saving Inputs: '); 
$('#savingResults').text('Saving Results: '); 
$('#savingComplete').text('Doing Cleanup: '); 

wait(250); 
$('#savingReport').append('Started...'); 
var status = saveReport(); 
$('#savingReport').append('Complete.'); 
wait(250); 
$('#savingInputs').append('Started....'); 
status = saveInputs(); 
$('#savingInputs').append('Complete.'); 
wait(250); 
$('#savingResults').append('Started....'); 
status = saveResults(); 
$('#savingResults').append('Complete.'); 
wait(250); 
$('#savingComplete').append('Started....'); 
status = saveComplete(); 
$('#savingComplete').append('Complete.'); 
$('#saving').hide(); 

다른 문제는 내 처음 페이지가로드, 그것의 주요 부분이 비어 있습니다 때 페이지의 해당 부분에 마우스를 실행할 때까지이다. 그런 다음 마우스를 움직이는 부분이 올바르게 나타납니다.

Answer 1

ajax 호출이 완료 될 때까지 기다려야합니다.

당신이 jQuery로 질문을 태그 때문에

function ajaxDemo(success){ 

    setTimeout(function(){ 

     foo = 2; 
     success; 

    }, 250); 
} 

var foo = 1; 

ajaxDemo(function(){ 

    console.log(foo); 
}); 

, 당신은 할 수 : 물론 AJAX 호출이 완료 될 수 있도록

var foo = 1; 

setTimeout(function(){ 
    foo = 2; 
}, 250); 

console.log(foo); //1 

는 당신이 필요로하는 것은 콜백 함수 : 아래의 코드는 Ajax 호출을 시뮬레이션 (버전이 1.5 이상인 경우) :

var ajaxCall1 = $.ajax({ /* ... your ajax code ... */ }), 
    ajaxCall2 = $.ajax({ /* ... your ajax code ... */ }), 
    ajaxCall3 = $.ajax({ /* ... your ajax code ... */ }); 

$.when(ajaxCall1, ajaxCall2, ajaxCall3).then(function(d1, d2, d3){ 
     console.log(d1); //data from first ajax call 
     console.log(d2); //data from second ajax call 
     //etc... 
}).fail(function() { 
     console.log('something went wrong in at least one of the ajax calls'); 
}); 

희망이 있습니다. 궁금한 점이 있으면 알려주세요.