여러 ajax 호출을위한 jQuery 콜백



5 Answers

당신이 이것에 대한 답을 갖고있는 것처럼 보이지만, 여기서 언급 할 가치가있는 것이 코드를 크게 단순화시킬 것이라고 생각합니다. jQuery는 v1.5에 $.when 를 도입했습니다. 모양은 다음과 같습니다.

$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});

여기에 언급 된 것을 보지 못했습니다. 도움이되기를 바랍니다.

Question

클릭 이벤트에서 세 건의 아약스 호출을 만들고 싶습니다. 각 Ajax 호출은 고유 한 작업을 수행하고 최종 콜백에 필요한 데이터를 반환합니다. 호출 자체는 서로 종속되지 않으며, 동시에 모두 갈 수 있습니다. 그러나 세 가지가 모두 완료되면 최종 콜백이 필요합니다.

$('#button').click(function() {
    fun1();
    fun2();
    fun3();
//now do something else when the requests have done their 'success' callbacks.
});

var fun1= (function() {
    $.ajax({/*code*/});
});
var fun2 = (function() {
    $.ajax({/*code*/});
});
var fun3 = (function() {
    $.ajax({/*code*/});
});



이 페이지의 답변에서 좋은 힌트를 얻었습니다. 나는 그것을 사용하기에 조금 적응했고 내가 나눌 수 있다고 생각했다.

// lets say we have 2 ajax functions that needs to be "synchronized". 
// In other words, we want to know when both are completed.
function foo1(callback) {
    $.ajax({
        url: '/echo/html/',
        success: function(data) {
            alert('foo1');
            callback();               
        }
    });
}

function foo2(callback) {
    $.ajax({
        url: '/echo/html/',
        success: function(data) {
            alert('foo2');
            callback();
        }
    });
}

// here is my simplified solution
ajaxSynchronizer = function() {
    var funcs = [];
    var funcsCompleted = 0;
    var callback;

    this.add = function(f) {
        funcs.push(f);
    }

    this.synchronizer = function() {
        funcsCompleted++;
        if (funcsCompleted == funcs.length) {
            callback.call(this);
        }
    }

    this.callWhenFinished = function(cb) {
        callback = cb;
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(this, this.synchronizer);
        }
    }
}

// this is the function that is called when both ajax calls are completed.
afterFunction = function() {
    alert('All done!');
}

// this is how you set it up
var synchronizer = new ajaxSynchronizer();
synchronizer.add(foo1);
synchronizer.add(foo2);
synchronizer.callWhenFinished(afterFunction);

여기에는 몇 가지 한계가 있지만, 제 경우에는 괜찮습니다. 또한 고급 기능을 제공하는 AOP 플러그인 (jQuery 용)이 유용 할 수도 있다는 것을 알게되었습니다. http://code.google.com/p/jquery-aop/




jquery가 아닙니다 (jquery는 실행 가능한 솔루션을 가지고 있습니다).하지만 또 다른 옵션으로 ...

비슷한 문제가 SharePoint 웹 서비스에 크게 작용했습니다. 단일 프로세스에 대한 입력을 생성하기 위해 여러 소스에서 데이터를 가져와야하는 경우가 있습니다.

이를 해결하기 위해 이러한 종류의 기능을 AJAX 추상화 라이브러리에 임베드했습니다. 완료되면 처리기 집합을 트리거하는 요청을 쉽게 정의 할 수 있습니다. 그러나 각 요청은 여러 http 호출로 정의 할 수 있습니다. 다음은 구성 요소 및 세부 설명서입니다.

DepressedPress.com의 DPAJAX

이 간단한 예제는 세 번의 호출로 하나의 요청을 생성 한 다음 해당 정보를 호출 순서대로 단일 처리기로 전달합니다.

    // The handler function 
function AddUp(Nums) { alert(Nums[1] + Nums[2] + Nums[3]) }; 

    // Create the pool 
myPool = DP_AJAX.createPool(); 

    // Create the request 
myRequest = DP_AJAX.createRequest(AddUp); 

    // Add the calls to the request 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [5,10]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [4,6]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [7,13]); 

    // Add the request to the pool 
myPool.addRequest(myRequest); 

이 메소드가 제공되는 호출의 단일 스레딩을 강요하지 않는다면, 다른 솔루션 (jquery의 "when"솔루션)을 포함하여 많은 다른 솔루션과 달리, 각 메소드는 환경이 허용하는 한 빨리 실행될 수 있습니다. 단일 처리기는 모두 완료 될 때만 호출됩니다. 또한 서비스가 약간 이상한 경우 시간 초과 값 및 재시도 설정을 지원합니다.

나는 미친 듯이 유용하다는 것을 알았고 (그리고 코드 관점에서 이해하기 란 매우 간단하다). 더 이상 체인을 연결하지 않고 통화를 더 이상 계산하지 않고 출력을 절약 할 수 있습니다. 그냥 "설정하고 잊어 버려".




$.when 모든 아약스 요청을 순차적 인수 (배열 아님)로 .apply() 하기 때문에 .apply() 와 같이 사용하면 일반적으로 $.when 볼 수 있습니다.

// Save all requests in an array of jqXHR objects
var requests = arrayOfThings.map(function(thing) {
    return $.ajax({
        method: 'GET',
        url: 'thing/' + thing.id
    });
});
$.when.apply(this, requests).then(function(resp1, resp2/*, ... */) {
    // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
    var responseArgsArray = Array.prototype.slice.call(this, arguments);

});

이것은 $.when 가이 같은 args를 받아들이 기 때문입니다.

$.when(ajaxRequest1, ajaxRequest2, ajaxRequest3);

그리고 이렇게 :

$.when([ajaxRequest1, ajaxRequest2, ajaxRequest3]);



나는 hvgotcodes의 아이디어를 좋아한다. 내 제안은 숫자를 필요한 수와 비교 한 다음 최종 콜백을 실행하는 일반적인 증분자를 추가하는 것입니다. 이것은 최종 콜백에 내장 될 수 있습니다.

var sync = {
 callbacksToComplete = 3,
 callbacksCompleted = 0,
 addCallbackInstance = function(){
  this.callbacksCompleted++;
  if(callbacksCompleted == callbacksToComplete) {
   doFinalCallBack();
  }
 }
};

[이름 업데이트 반영을 위해 편집 됨]




$.ajax({type:'POST', url:'www.naver.com', dataType:'text', async:false,
    complete:function(xhr, textStatus){},
    error:function(xhr, textStatus){},
    success:function( data ){
        $.ajax({type:'POST', 
            ....
            ....
            success:function(data){
                $.ajax({type:'POST',
                    ....
                    ....
            }
        }
    });

미안하지만, 내가 영어로 말조차 할 수없는 한국어를하는 이유를 설명 할 수 없다. 그러나 나는 당신이 그것을 쉽게 이해할 수 있다고 생각합니다.






Related