저는 Ajax에 대해 처음 접했지만 사용의 요지는 '비동기'부분이라고 생각했습니다. 불행히도, 나는 동기 지옥에 갇혀있는 것 같습니다.모든 XHR로드가 완료 될 때까지 jQuery.ajax() 페이지로드가 완료되지 않습니까?
내 페이지의 초기에는 다수의 요소가 만들어지고 각 요소에는 고유 한 ID가 있습니다.
jQuery를 사용하여 각 요소를 반복하고 ajax() 호출을 실행합니다 (여기서 명시 적으로 'async'을 true로 설정 함). 현재 완료되면 각 Ajax 호출은 해당 요소를 텍스트 출력으로 채 웁니다. 결국 그것은 IMG가 될 것입니다.
페이지에서 "사용중"마우스 커서가 표시되고 모든 요소 (17 개)가 반환 될 때까지 특정 요소가 채워지지 않습니다.
jQuery('.ajax-item').each(function(index){
$item = jQuery(this);
ID = $item.attr('id');
//$item.load(WPGlobals.ajaxurl, { 'action' : 'my-action', 'ID' : ID });
jQuery.ajax({
url : WPGlobals.ajaxurl,
type : 'POST',
async : true,
data : { 'action' : 'my-action', 'ID' : ID },
success : function(response){ $item.html(response) }
});
});
(위)이 코드를 보면이이 워드 프레스 사이트 (나는 그것이 무슨 상관이 될지 모른다하지만)입니다 점에 유의 할 것 :
여기 내 jQuery를 호출이다 또한 간단한 load() 방법을 시도하고 ajax()으로 전환 했으므로 async : true을 강제로 실행할 수 있습니다.이 경우 일부 WP 이상한 결과로 인해 문제가 생길 수 있습니다.
나는 올바른 방향으로 가고 있습니까? AJAX에 상관없이 내 페이지를로드해서는 안되며 XHR이 들어올 때 해당 항목이 지연되어 표시됩니다.
EDIT - 정적 호출에서 논리가 엉망임을 눈치 챘습니다. 나는 $ item을 적절하게 스코프에 넣기 위해 closure가 필요할 것이지만, 여기에는 비동기 문제까지 존재하지 않는다. 페이지로드가 완료되기 전에 17 개의 XHR을 여전히 발사하고 집에 돌아 오기를 기다린다.
한 페이지에 17 개의 XHR 요청? 비동기식이든 아니든간에, 그 중 일부를 결합하는 방법을 찾아야합니다. 두 개 이상의 AJAX 요청이 서로 다른 매개 변수를 사용하여 동일한 스크립트로 이동하는 경우 서버 측 코드를 다시 작성하여 하나의 요청으로 모두 전달한 다음 jQuery로 클라이언트 쪽을 구문 분석 할 수 있어야합니다. – Blazemonger
코드를 변경하여 모든 데이터 필드를 먼저 반복하고 모든 데이터 필드를 한 번에 서버로 보내고 반환 된 데이터를 처리하도록 고려할 수 있습니다. 아마 $ .each 루프와 ajax 호출이 아닌 DOM을 액세스하는 것의 조합 일 것입니다. DOM에 액세스 (각 요소를 가져 오거나, 요소의 내용을 변경하거나, 속성을 보는 등)하면 페이지의 속도가 느려지 게됩니다. – scrappedcola