여러 개의 ajax 호출이 마지막 호출이 로드될 때까지 기다린 다음 실행

여러 개의 ajax 호출이 마지막 호출이 로드될 때까지 기다린 다음 실행

여러 개의 ajax 쿼리가 동시에 실행되고 있는데 마지막 쿼리가 돌아올 때까지 기다렸다가 모든 ajax 호출에서 성공 핸들러를 실행했으면 합니다.단순화된 예로 다음을 생각해 볼 수 있습니다.

$.ajax({//ajax call 1
    url:page1.php,
    success: function(data1){
        //do something with data1
    }
});

....

$.ajax({//ajax call 2
    url:page2.php,
    success: function(data2){
        //do something with data2
    }
});
//consider more than just two concurrent requests

모든 요청이 동시에 발송된다고 가정해 보겠습니다.비동기식이기 때문에 서로 다른 시간에 돌아올 것입니다.하나의 요청이 반환되는 데 100ms가 걸리고 다른 하나의 요청이 반환되는 데 3000ms가 걸린다고 가정해 보겠습니다.저는 분명히 어떤 것이 먼저 돌아올지 마지막으로 돌아올지 모릅니다.그들은 모두 어떤 방식으로든 DOM을 업데이트하고 나는 한 번의 업데이트에서 그 변경 사항들을 뷰어에게 한 번에 보여주기를 원합니다.이거 어떻게 해요?

제가 생각할 수 있는 최선의 방법은 data1과 data2를 글로벌 변수로 저장하는 것입니다.그런 다음 성공이 반환될 때마다 계산하는 카운터 변수를 가집니다.그럼, 카운터==TOTAL_NUM_REQUESTs는 updateAll()과 같은 함수를 호출한 다음 모든 전역 변수를 실행하여 필요한 곳에 배치합니다.하지만 이것은 지저분하고 실수하기 쉬운 것 같습니다.게다가 그것은 많은 세계적인 변수가 될 것입니다.

제가 이상적으로 원하는 것은 성공 처리자들이 돌아올 때 잠을 자도록 한 후, 제가 그들 모두를 반환된 것으로 계산하는 조건으로, 그들 모두에게 웨이크업 메시지를 보내면 그들은 실행을 재개할 수 있습니다.이게 제일 깨끗해 보이는데 자바스크립트랜드에서 이런 기능이 있는지 모르겠네요.

이것에 대해 현명한 생각을 가진 사람이 있습니까?

답변 업데이트

아래 이씨 덕분에 해결책을 얻을 수 있었습니다.저의 해결책은 그의 아래와 비슷해 보였습니다.나는 다음의 목록을 만듭니다.async$.208 호출에 할당된 변수입니다.처음에는 그 ajax 호출의 성공 처리기가 계속 호출되고 있었기 때문에 제거하고 나중에 호출될 다른 함수에 넣었습니다.when내가 쓴 블록.합격했습니다results다음과 같은 기능을 수행합니다.

var results = [];
results.push(async1);
results.push(async2);
... for all the results ...

$.when.apply(this, results).done(function() {
   for(var i=0;i<arguments.length;i++){
     dataobject=arguments[i][0]
     if(dataobject.variousattribute)
       mySuccessHandlerFirstGuy(dataobject)
     else if(dataobject.anotherattribute)
       mySuccessHandlerSecondGuy(dataobject)
       //etc ....
   }
};

인수 개체가 무엇인지 파악하는 데 약간의 작업이 필요했습니다.그것은 2d 배열(목록 목록)이었습니다.첫 번째 인덱스는 주어진 ajax 요청에 해당하는 반환된 개체를 나타냅니다.순서가 맞는 것 같지만, 서버에서 찾아 볼 수 있는 것을 돌려주고, 그에 따라 if/다른 블록을 쓰는 것이 가장 좋습니다.그러면 해당 요소에는 해당 목록 내에 3개의 요소가 있는 것으로 나타납니다.첫 번째는 서버에서 반환된 값, 즉 원하는 값입니다.두번째는 항상 끈이었습니다.success데 할 수 으로 가 했는지 하는 할 가 했는지 그리고 그 목록의 세 번째 요소는 (잘 모르겠지만) 첫 번째 요청인 것 같습니다.이것은 나에게 아무 소용이 없었습니다.

어쨌든 앞으로 누군가에게 도움이 되었으면 좋겠습니다.그리고 저에게 정확한 방향을 알려준 리에게 다시 한번 감사드립니다.

jQuery $.when() 함수를 사용하면 모든 ajax 호출이 완료될 때 무언가를 실행할 수 있습니다.

jQuery.white.when 문서

var async1 = $.ajax({//ajax call 1
    url:page1.php,
    success: function(data1){
        //do something with data1
    }
});

....

var async2 = $.ajax({//ajax call 2
    url:page2.php,
    success: function(data2){
        //do something with data2
    }
});

$.when(async2, async1).done(function(result2, result1) {
    ... do this when both are successful ...
});

질문에 대한 응답으로 추가됨:

ajax 호출이 많으면 다음과 같이 'apply'를 사용할 수 있습니다.

var results = [];
results.push(async1);
results.push(async2);
... for all the results ...

$.when.apply(this, results).done(function() {
    ... use 'arguments' array to get results ...
});

이 작업은 이미 제안한 작업과 매우 유사한 방식으로 수행할 수 있습니다.

변수 를 을 만듭니다.var sleep = true그리고.var request_count = 0. 그런 다음 확인하는 타이머를 시작합니다.request_count매 초마다 총 요청 수를 기준으로 할 수 있습니다.면공할수다가다수t할면n가공을 증가시킬 수 있습니다.request_counter그리고 나서 그 때까지 루프를 하기 시작합니다.sleep == false function이 . 를 되면 인 이 되면 이 인 request_count == TOTAL_REQUESTS그것이 지다sleep = false는 그 됩니다. , 인 은 에서 됩니다 의 에 의 됩니다 에 의 .

간단한 해결책은 PreloaderQ 모듈을 사용하는 것입니다.

https://www.npmjs.com/package/preloaderq

아래와 같이 사용

var preloader = new PreloaderQ()
preloader.setEmptyCallback(function(){
    //all tasks are finished
})

preloader.setFirstTaskCallback(function(){
    //started first task
})

preloader.enqueueTask('ajax1')

$.ajax({//ajax call 1
    url:page1.php,
    success: function(data1){
        prealoader.dequeueTask('ajax1')
        //do something with data1
    }
});

preloader.enqueueTask('ajax2')

$.ajax({//ajax call 1
    url:page2.php,
    success: function(data2){
        prealoader.dequeueTask('ajax2')
        //do something with data2
    }
});

빈 콜백은 둘 다 끝나면 호출됩니다.

언급URL : https://stackoverflow.com/questions/14465177/multiple-ajax-calls-wait-for-last-one-to-load-then-execute