jQuery. 이해할 때

jQuery. 이해할 때

---

를 사용하여 jQuery.when두 개의 ajax요청을 실행 한 다음 두 요청이 완료된 후 일부 함수를 호출 하려고합니다 . 내 코드는 다음과 같습니다.

var count = 0;
var dfr;

var showData = function(data) {
    dfr.resolve();
    alert(count);
   // Do something with my data data received
};

var method1 = function() {
    dfr = $.Deferred();

    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: showData
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            count = data.d.__count;
        }
    });
};

$.when(method1(), method2())
    .then(showData());

그러나 이것은 예상대로 작동하지 않습니다. Ajax 호출은에서 method1사용될 데이터를 반환 showData()하고 Ajax 호출은 method2var count에 할당되고 나중에에서 사용되는 count를 반환 showData()합니다.

나는 위의 코드를 불 때, method1다음 전화를 가져옵니다 method2다음 showData의 데이터를 떠나기 showData로 'undefined'. $.when내가 아는 한 두 함수가 모두 $.promise실행될 때만 진행되는 이것을 어떻게 얻을 수 있습니까 ? 두 개의 ajax 호출이 병렬로 호출되고 두 호출의 결과를 기반으로 나중에 결과가 표시되기를 원합니다.

---

function showData(data1, data2) {
    alert(data1[0].max_id);
    alert(data2[0].max_id);
}

function method1() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

function method2() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

$.when(method1(), method2()).then(showData);​

Here's a working jsFiddle

---

The problem is that you're passing showData() to then(), not showData. You should pass a reference to a function to .then():

$.when(method1(), method2())
    .then(showData);

or

$.when(method1(), method2())
    .then(function () {
        showData();
    });

Edit

I've put together a working demo. Part of the problem (at least in the code fragment you posted) was that there was no callback function named $callback. Part of the problem was the $ in the callback name '$callback'.

So, remove the jsonp: '$callback' ajax option, so that jQuery defaults to a callback function named callback, and define a function with that name, and it all works.

---

I have little bit modified your code and made simpler to understand... i haven't test it please try it

var count = 0;
function countResponse(data) {
    count++;
    if(count==2)
    {
        // Do something after getting responce from both ajax request
    }
};

var method1 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};

ReferenceURL : https://stackoverflow.com/questions/5280699/jquery-when-understanding