ajaxStop() Ajax 요청이 완료되면 호출

.ajaxStop()

원문 링크 http://api.jquery.com/ajaxStop/

ajaxStop( handler() )Returns : jQuery

개요 : 모든 Ajax 요청이 완료되면 호출할 핸들러를 등록합니다. 이것은 Ajax 이벤트 입니다.

• .ajaxStop( handler() )
• handler() 실행될 함수

Ajax 요청을 완료되면, jQuery는 진행중인 Ajax 요청이 있는지 체크합니다. 만일 진행중인 Ajax 요청이 없다면, jQuery는 ajaxStop 이벤트를 발생시킵니다. .ajaxStop() 함수에서 등록된 모든 핸들러가 실행되게 됩니다. 또한, ajaxStop 이벤트는 마지막 Ajax 요청이 beforeSend 콜백 함수네에서 false를 반환하여 취소가 되어도 발생하게 됩니다.

이 함수가 동작하는 것을 보기위해 기본적인 Ajax 요청을 만들 수 있습니다.

<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>

특정한 엘리먼트에 이벤트 핸들러를 붙여 보겠습니다.

$('.log').ajaxStop(function() {
  $(this).text('Triggered ajaxStop handler.');
});

그리고, Ajax를 실행시킬 jQuery 함수를 사용하면:

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

trigger 클래스를 가진 div 를 클릭한 후 모든 Ajax 요청이 완료되면 log 메시지가 log 클래스 div 태그에 나타나게 됩니다.

Note: .ajaxStop() 함수는 jQuery 객체에 의해 만들어지기 때문에, this 키워드는 콜백 함수내에서 선택되어진 요소를 지칭하게 됩니다.

예 제  
모든 요청이 완료되면 loading 메시지를 안보이게 처리합니다.

$("#loading").ajaxStop(function(){
      $(this).hide();
});

 

Ajax 처리가 종료되어 loading 바를 없애야 할 때 사용하면 좋겠네요. ajaxStart 와 ajaxStop이 한쌍이네요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.