jQuery : 모든 비동기 작업이 완료되었는지 확인하는 방법

Question

웹 양식에 체크 박스가 여러 개 있습니다. 특정 상자를 클릭하면 더 많은 데이터가 포함 된 특정 div가 표시되거나 숨겨집니다. div가 제대로 보이지 않거나 표시되면 서식 명령을 실행하여 제대로 구성하고 색을 지정합니다.

일부 체크 박스는 다른 체크 박스에 종속적이며 계단식 구성표가 구현되므로 여러 체크 박스가 한 번에 상태를 변경하는 것이 가능합니다.

각 확인란마다 코드를 작성하는 대신 바로 가기를 사용하고 모든 확인란을 동일한 방식으로 처리하기로 결정했습니다. 나는 (무리 더있다, 포인트를 만들기 위해이 개 체크 박스/div의 사용) 같은 끝났다 :

jQuery(document).ready(function() { 

    alternateDivs(); 

    jQuery('#AccessCAS, #CAS_LELOCSpecific').on('click', function() { 
     showHide(); 
    }); 

}); 

function showHide() { 

    var theChecks = [ 
     { 
      checkId: 'AccessCAS', 
      divId: 'divCAS' 
     }, 
     { 
      checkId: 'CAS_LELOCSpecific', 
      divId: 'divLELOC' 
     } 
    ]; 

     var pendingChanges = 0; 

    for (i = 0; i < theChecks.length; i++) { 
     var checked = jQuery('#' + theChecks[i].checkId).is(':checked'); 
     var visible = jQuery('#' + theChecks[i].divId).is(':visible') 
     if (checked && !visible) { 
      pendingChanges++; 
      jQuery('#' + theChecks[i].divId).fadeIn(400, function() { 
       pendingChanges--; 
      }); 
     } else if (!checked && visible) { 
      pendingChanges++; 
      jQuery('#' + theChecks[i].divId).fadeOut(400, function() { 
       pendingChanges--; 
      }); 
     } 
    } 
//check for pending changes 

} 

function alternateDivs() { 
    jQuery('.formTable:visible:odd').css('background-color', '#eeb'); 
    jQuery('.formTable:visible:even').css('background-color', '#eef'); 
} 

나 의미가 제대로 표시됩니다 보여되어 모든 div의를 확인하는 것이 필요입니다 그들은 alternateDivs()을 호출하기 전에 가시적 인/보이지 않는 상태로 완전히 전이되어야합니다. Divs가 전환 될 때 pendingChanges 값이 증가 및 감소하도록 설정하는 것을 볼 수 있습니다.

내가 무엇을하고 싶은지 pendingChanges이 0 일 때와 그 일이 alternateDivs() 일 때를 확인하는 비동기 프로세스를 설정하고 싶습니다. 나는 비동기 적이기 때문에 사용자 경험을 방해하지 않기를 바란다.

나는 이것이 어떤 종류의 콜백을 통해 이루어질 수 있다고 믿지만, 이것은 내 전문 분야에서 벗어난다. 비동기 함수를 설정하고 호출하여 다른 비동기 함수가 완료되었는지 확인하고 다른 함수를 호출하여 종료하는지 확인하는 방법은 무엇입니까?

나는 분명히 희망합니다.

Answer 1

어떻게 페이드 콜백에서 if 문을 퍼팅에 대해?

if(pendingChanges==0){ alternateDivs() } 

Answer 2

비동기로드 작업이 끝난 후로드 한 각 div를 확인하고 모두 완료했는지 확인하는 폴링 작업이 필요합니다. 모든 요소가 확인 될 때까지 폴링합니다.

각로드 작업에 대해 "onSuccess"또는 "onComplete"이벤트를 설정하여 플래그를 게시하고 해당 플래그를 폴러에 사용할 수도 있습니다.

이는 폴링 것이 방법입니다

load1(); 
load2(); 
loadn(); 

(function poll(){ 
    setTimeout(function(){ 

    if (!allAreLoaded()){ 
    poll(); 
    } 

    }, 30000); 
})();