여러 아약스 통화의 jQuery 콜백

해결법

1.여기에 당신이 중 하나를 모두 완료하면 화재에 하나의 콜백을 설정하거나 각각 자신의 콜백 및 화재 그들에게 모두 모두 완료하면이하도록 할 수 있습니다 내가 쓴 콜백 오브젝트는 다음과 같습니다

여기에 당신이 중 하나를 모두 완료하면 화재에 하나의 콜백을 설정하거나 각각 자신의 콜백 및 화재 그들에게 모두 모두 완료하면이하도록 할 수 있습니다 내가 쓴 콜백 오브젝트는 다음과 같습니다

주의

다른 답변에 설명 된대로 jQuery를 1.5 이후에는 연기 방법을 사용할 수 있습니다 :

  $.when($.ajax(), [...]).then(function(results){},[...]);

예 여기에 연기

jQuery를 <1.5에 대한 다음과 같은 작동합니다 또는 당신이 당신의 아약스 통화를해야하는 경우 두 개의 버튼을 사용하여 다음과 같이 알 수없는 시간에 해고 : 해고 두 버튼을 클릭 한 후

[용법]

완료하면 하나의 콜백 : 작업 예

// initialize here
var requestCallback = new MyRequestsCompleted({
    numRequest: 3,
    singleCallback: function(){
        alert( "I'm the callback");
    }
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});

각각 자신의 콜백을 가지고, 모두 완료하면 : 작업 예

//initialize 
var requestCallback = new MyRequestsCompleted({
    numRequest: 3
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the first callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the second callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the third callback');
        });
    }
});

[코드]

var MyRequestsCompleted = (function() {
    var numRequestToComplete, requestsCompleted, callBacks, singleCallBack;

    return function(options) {
        if (!options) options = {};

        numRequestToComplete = options.numRequest || 0;
        requestsCompleted = options.requestsCompleted || 0;
        callBacks = [];
        var fireCallbacks = function() {
            alert("we're all complete");
            for (var i = 0; i < callBacks.length; i++) callBacks[i]();
        };
        if (options.singleCallback) callBacks.push(options.singleCallback);

        this.addCallbackToQueue = function(isComplete, callback) {
            if (isComplete) requestsCompleted++;
            if (callback) callBacks.push(callback);
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.requestComplete = function(isComplete) {
            if (isComplete) requestsCompleted++;
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.setCallback = function(callback) {
            callBacks.push(callBack);
        };
    };
})();

2.당신 같은 외모, 그러나 나는 크게 코드를 단순화 것이다 여기에 언급 뭔가 가치가 있다고 생각이 몇 가지 답변을 가지고있다. jQuery를이 V1.5에서 $ .when을 소개했다. 그것은 다음과 같습니다

당신 같은 외모, 그러나 나는 크게 코드를 단순화 것이다 여기에 언급 뭔가 가치가 있다고 생각이 몇 가지 답변을 가지고있다. jQuery를이 V1.5에서 $ .when을 소개했다. 그것은 다음과 같습니다
```
$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});
```
그것은 여기에 언급 보지 못했다, 그것은 도움이되기를 바랍니다.

3.모든 개체가 자신을 malarky의 필요성을보고하지 않습니다. 간단한은 정수 변수를 가지고있다. 당신이 요청을 시작하면, 수를 증가. 때 하나 개의 완료는, 그것을 감소. 제로의 경우 작업을 완료, 그래서, 진행중인 요청이 없습니다.

모든 개체가 자신을 malarky의 필요성을보고하지 않습니다. 간단한은 정수 변수를 가지고있다. 당신이 요청을 시작하면, 수를 증가. 때 하나 개의 완료는, 그것을 감소. 제로의 경우 작업을 완료, 그래서, 진행중인 요청이 없습니다.

$('#button').click(function() {
    var inProgress = 0;

    function handleBefore() {
        inProgress++;
    };

    function handleComplete() {
        if (!--inProgress) {
            // do what's in here when all requests have completed.
        }
    };

    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
});

4.모든 순차적 인수로 아약스 요청 (안 배열)를 보낸 사람 $ .when 예상하는 일반적 .apply ()과 같이 함께 사용 $ .when를 볼 수 있다는 지적이의 가치 :

모든 순차적 인수로 아약스 요청 (안 배열)를 보낸 사람 $ .when 예상하는 일반적 .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이 같은 인수를 허용하기 때문이다

$.when(ajaxRequest1, ajaxRequest2, ajaxRequest3);

그리고하지과 같습니다 :

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

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

나는 hvgotcodes '아이디어를 좋아한다. 나의 제안은 필요한 개수와 전체를 비교 한 후 최종 콜백을 실행하는 일반적인 증 분기를 추가하는 것입니다. 이 최종 콜백에 내장 될 수있다.
```
var sync = {
 callbacksToComplete = 3,
 callbacksCompleted = 0,
 addCallbackInstance = function(){
  this.callbacksCompleted++;
  if(callbacksCompleted == callbacksToComplete) {
   doFinalCallBack();
  }
 }
};
```
[이름 업데이트를 반영하기 위해 수정 됨.]
6.편집 - 아마도 최선의 선택은 세 가지 요청이하는 모든 일을하는 서비스 엔드 포인트를 작성하는 것입니다. 당신이 응답 할 그것을 필요로하는 곳에 당신은 단지 하나 개의 요청을해야 할 그런 식으로, 모든 데이터입니다. 당신은 당신이 계속해서 또 다시 같은 3 개 요청을하고 찾아내는 경우에, 당신은 아마이 길을 가고 싶어합니다. 종종 덩어리가 일반적으로 함께 작은 서버 작업을 사용하는 서버의 외관 서비스를 설정하는 좋은 디자인 결정이다. 그냥 생각.

편집 - 아마도 최선의 선택은 세 가지 요청이하는 모든 일을하는 서비스 엔드 포인트를 작성하는 것입니다. 당신이 응답 할 그것을 필요로하는 곳에 당신은 단지 하나 개의 요청을해야 할 그런 식으로, 모든 데이터입니다. 당신은 당신이 계속해서 또 다시 같은 3 개 요청을하고 찾아내는 경우에, 당신은 아마이 길을 가고 싶어합니다. 종종 덩어리가 일반적으로 함께 작은 서버 작업을 사용하는 서버의 외관 서비스를 설정하는 좋은 디자인 결정이다. 그냥 생각.

그것을 할 수있는 한 가지 방법은 아약스 호출하기 전에 클릭 핸들러에서 '동기화'객체를 생성하는 것입니다. 같은 뭔가
```
var sync = {
   count: 0
}
```
동기화가 자동으로 성공 통화의 범위 (폐쇄)에 바인딩됩니다. 성공 핸들러에서는 수를 증가하고, 3 인 경우에는 다른 함수를 호출 할 수 있습니다.

양자 택일로, 당신은 뭔가를 할 수
```
var sync = {
   success1Complete: false,
   ...
   success3Complete: false,
}
```
각각의 성공이 실행되면 true로 동기의 값을 변경합니다. 당신은 세 가지를 모두 진행하기 전에 해당하는지 확인하기 위해 동기화를 확인해야합니다.

당신의 XHR이 중 하나가 성공을 반환하지 않는 경우를 참고 - 당신은 그것을 위해 계정이 필요합니다.

또 다른 옵션은 실제로 아무것도 할 여부를 결정하기 위해 동기화 옵션에 액세스 항상 성공 핸들러에서 최종 함수를 호출, 그리고 것이다. 당신은 확실히 동기화가 있지만 그 기능의 범위에 있도록해야합니다.

7.나는 큐를 준비 추가 방법의 필요없이 그것을 할 수있는 쉬운 방법을 발견했다.

나는 큐를 준비 추가 방법의 필요없이 그것을 할 수있는 쉬운 방법을 발견했다.

$.ajax({
  type: 'POST',
  url: 'ajax1.php',
  data:{
    id: 1,
    cb:'method1'//declaration of callback method of ajax1.php
  },
  success: function(data){
  //catching up values
  var data = JSON.parse(data);
  var cb=data[0].cb;//here whe catching up the callback 'method1'
  eval(cb+"(JSON.stringify(data));");//here we calling method1 and pass all data
  }
});


$.ajax({
  type: 'POST',
  url: 'ajax2.php',
  data:{
    id: 2,
    cb:'method2'//declaration of callback method of ajax2.php
  },
  success: function(data){
  //catching up values
  var data = JSON.parse(data);
  var cb=data[0].cb;//here whe catching up the callback 'method2'
  eval(cb+"(JSON.stringify(data));");//here we calling method2 and pass all data
  }
});


//the callback methods
function method1(data){
//here we have our data from ajax1.php
alert("method1 called with data="+data);
//doing stuff we would only do in method1
//..
}

function method2(data){
//here we have our data from ajax2.php
alert("method2 called with data="+data);
//doing stuff we would only do in method2
//..
}

PHP (ajax1.php)

<?php
    //catch up callbackmethod
    $cb=$_POST['cb'];//is 'method1'

    $json[] = array(
    "cb" => $cb,
    "value" => "ajax1"
    );      

    //encoding array in JSON format
    echo json_encode($json);
?>

PHP (ajax2.php)

<?php
    //catch up callbackmethod
    $cb=$_POST['cb'];//is 'method2'

    $json[] = array(
    "cb" => $cb,
    "value" => "ajax2"
    );      

    //encoding array in JSON format
    echo json_encode($json);
?>

8.나는 얼마 전에 같은 질문 a를 물어 여기에 좋은 답변을 몇 가지 가지고 : 추가 할 수있는 가장 좋은 방법은 '콜백'비동기 XHR 호출하는 일련의 후

나는 얼마 전에 같은 질문 a를 물어 여기에 좋은 답변을 몇 가지 가지고 : 추가 할 수있는 가장 좋은 방법은 '콜백'비동기 XHR 호출하는 일련의 후

9.나는이 페이지에 대한 답변에서 좋은 힌트를 얻었다. 내 사용을 위해 조금 적응과 내가 공유 할 수 있다고 생각.

나는이 페이지에 대한 답변에서 좋은 힌트를 얻었다. 내 사용을 위해 조금 적응과 내가 공유 할 수 있다고 생각.

// 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);

이 몇 가지 제한 사항이 여기에 있습니다,하지만 내 경우에 그것을 확인했다. 또한 고급 물건이 유용 할 수 있습니다 (jQuery를 위해) AOP 플러그인도 있다는 것을 발견 http://code.google.com/p/jquery-aop/

10.오늘은이 문제를 가로 질러 와서이 허용 대답을보고하기 전에 내 순진 시도였다.

오늘은이 문제를 가로 질러 와서이 허용 대답을보고하기 전에 내 순진 시도였다.

<script>
    function main() {
        var a, b, c
        var one = function() {
            if ( a != undefined  && b != undefined && c != undefined ) {
                alert("Ok")
            } else {
                alert( "¬¬ ")
            }
        }

        fakeAjaxCall( function() {
            a = "two"
            one()
        } )
        fakeAjaxCall( function() {
            b = "three"
            one()
        } )
        fakeAjaxCall( function() {
            c = "four"
            one()
        } )
    }
    function fakeAjaxCall( a ) {
        a()
    }
    main()
</script>

11.그것은 JQuery와 아니다 (그리고 JQuery와 실행 가능한 솔루션을 나타납니다)하지만 또 다른 옵션으로 ....

그것은 JQuery와 아니다 (그리고 JQuery와 실행 가능한 솔루션을 나타납니다)하지만 또 다른 옵션으로 ....

나는 SharePoint 웹 서비스를 많이 작업 비슷한 문제를 했어 - 자주 단일 프로세스에 대한 입력을 생성하기 위해 여러 소스에서 풀 데이터가 필요합니다.

이를 해결하기 위해 내 AJAX 추상화 라이브러리로 이런 종류의 기능을 내장. 당신은 쉽게 완료 핸들러 세트를 트리거 요청을 정의 할 수 있습니다. 그러나 각 요청은 여러 HTTP 호출을 정의 할 수 있습니다. 다음 구성 요소 (및 자세한 설명서)이다 :

DPAJAX DepressedPress.com에서

이 간단한 예는 세 개의 호출 한 요청을 만든 다음 하나의 핸들러 호출 순서에 따라 해당 정보를 전달합니다 :
```
    // 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와의 솔루션은 "때") 그 통화의 단일 스레딩 만들어지고 강요하지 않습니다이 방법을 제공 - 환경이 허용하는 각 여전히 빠르게로 실행 (또는 느리게)됩니다 모두 완료되면하지만 하나의 핸들러 만 호출됩니다. 서비스가 약간의 flakey 경우 그것은 또한 시간 제한 값 및 재시도 설정을 지원합니다.

나는 미친 듯이 유용 (믿을 수 없을만큼 간단한 코드의 관점에서 이해하는) 발견했습니다. 더 이상 더 이상, 체인없는 전화를 계산하고 출력을 저장. 다만 "그것을 설정하고 그것을 잊지".
12.좋아,이 오래된하지만 내 솔루션을 기여 주시기 바랍니다 :)

좋아,이 오래된하지만 내 솔루션을 기여 주시기 바랍니다 :)
```
function sync( callback ){
    syncCount--;
    if ( syncCount < 1 ) callback();
}
function allFinished(){ .............. }

window.syncCount = 2;

$.ajax({
    url: 'url',
    success: function(data) {
        sync( allFinished );
    }
});
someFunctionWithCallback( function(){ sync( allFinished ); } )
```
이 콜백이 기능도 사용할 수 있습니다. 당신은 syncCount를 설정하고 모든 행동의 콜백 함수 동기화 (...)를 호출합니다.

13.

$.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',
                    ....
                    ....
            }
        }
    });

미안하지만 난 영어로도 단어를 말할 수없는 한국 해요 사촌 내가 쓴 설명 할 수 없다. 하지만 난 당신이 쉽게 이해할 수 있다고 생각합니다.

14.
```
async   : false,
```
기본적으로 모든 요청 (즉이 기본적으로 true로 설정) 비동기 전송됩니다. 당신이 동기 요청을해야 할 경우,이 옵션을 false로 설정합니다. 크로스 도메인 요청 및 데이터 형식 : "JSONP"요청은 동기 작업을 지원하지 않습니다. 참고 동기 요청이 일시적으로 요청이 활성화되어있는 동안 어떤 행동을하지 않도록 브라우저를 잠글 수 있음. jQuery를 1.8로, 비동기의 사용 : jqXHR ($ .Deferred)와 거짓이되지 않습니다; 당신은 jqXHR.done () 또는 사용되지 않는 jqXHR.success ()로 jqXHR 객체의 대응 방법 대신 성공 / 오류 / 전체 콜백 옵션을 사용해야합니다.

from https://stackoverflow.com/questions/4368946/jquery-callback-for-multiple-ajax-calls by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 변경 전 선택 (드롭 다운)의 값을 얻기 (0)	2020.10.01
[JQUERY] 자바 스크립트 전에 페이지를 떠나 (0)	2020.10.01
[JQUERY] 어떻게 자바 스크립트와 사업부의 화면을 캡처하는 방법? (0)	2020.10.01
[JQUERY] 하나의 공간을 여러 공백을 대체하는 정규 표현식 (0)	2020.10.01
[JQUERY] 마우스가 jQuery를의 요소 상에 있는지 어떻게 확인합니까? (0)	2020.10.01

복붙노트

[JQUERY] 여러 아약스 통화의 jQuery 콜백

여러 아약스 통화의 jQuery 콜백

해결법

1.여기에 당신이 중 하나를 모두 완료하면 화재에 하나의 콜백을 설정하거나 각각 자신의 콜백 및 화재 그들에게 모두 모두 완료하면이하도록 할 수 있습니다 내가 쓴 콜백 오브젝트는 다음과 같습니다

2.당신 같은 외모, 그러나 나는 크게 코드를 단순화 것이다 여기에 언급 뭔가 가치가 있다고 생각이 몇 가지 답변을 가지고있다. jQuery를이 V1.5에서 $ .when을 소개했다. 그것은 다음과 같습니다

4.모든 순차적 인수로 아약스 요청 (안 배열)를 보낸 사람 $ .when 예상하는 일반적 .apply ()과 같이 함께 사용 $ .when를 볼 수 있다는 지적이의 가치 :

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

7.나는 큐를 준비 추가 방법의 필요없이 그것을 할 수있는 쉬운 방법을 발견했다.

8.나는 얼마 전에 같은 질문 a를 물어 여기에 좋은 답변을 몇 가지 가지고 : 추가 할 수있는 가장 좋은 방법은 '콜백'비동기 XHR 호출하는 일련의 후

9.나는이 페이지에 대한 답변에서 좋은 힌트를 얻었다. 내 사용을 위해 조금 적응과 내가 공유 할 수 있다고 생각.

10.오늘은이 문제를 가로 질러 와서이 허용 대답을보고하기 전에 내 순진 시도였다.

11.그것은 JQuery와 아니다 (그리고 JQuery와 실행 가능한 솔루션을 나타납니다)하지만 또 다른 옵션으로 ....

12.좋아,이 오래된하지만 내 솔루션을 기여 주시기 바랍니다 :)

13.

14.

'JQUERY' 카테고리의 다른 글

티스토리툴바