자바 스크립트 : X 비동기 데이터베이스/아약스 호출 후

Question

을 호출하면 더 나은 방법으로 백본을 사용할 수 있습니다 .js 우리는 특정 상황에서 클라이언트 웹 서비스에 아약스 게시물을 보내야하는 응용 프로그램이 있습니다.

그러나 게시 할 콘텐츠는 동적이며 특정 배열에 의해 결정됩니다.

배열의 각 항목에 대해 데이터 조각을 가져와야합니다.

집합 개체를 전송해야하는 데이터를 어셈블 한 후

지금은 동기식 접근 방식을 사용하고 있지만 이것이 최선의 방법은 아닐 것이라고 생각합니다.

var arrParams = [{id: 1, processed: false},{id: 7, processed: false},{id: 4, processed: false}]; 

function callback(data) { 
    $.post()... // jquery ajax to post the data... } 

function fetchData(arr, data, callback) { 
    var currentId = _(arr).find(function(p){ return p.processed === false; }).id; // getting the ID of the first param that has processed on false... 

    // ajax call fetching the results for that parameter. 
    $.ajax({ 
     url: 'http://mysuperwebservice.com', 
     type: 'GET', 
     dataType: 'json', 
     data: {id: currentId}, 

     success: function(serviceData) { 
      data[currentId] = serviceData; // insert it into the data 
      _(arr).find(function(p){ return p.id === currentId; }).processed = true; // set this param in the array to 'being processed'. 
      // if more params not processed, call this function again, else continue to callback 
      if(_(arr).any(function(p){ return p.processed === false })) 
      { 
       fetchData(arr, data, callback); 
      } 
      else 
      { 
       callback(data); 
      } 
     }, 
     error: function(){ /* not important fr now, ... */ } 
    }); 
} 

fetchData(arrParams, {}, callback); 

이 호출을 비동기로 실행하고 모든 결과가 들어있을 때만 콜백을 실행할 수있는 방법이 없습니까?

Answer 1

JQuery $.Deferred 개체를 사용해야 동기화 할 수 있습니다. 이 문서 봐 Deferred Docs

당신은이 방법으로 사용할 수 있습니다

:

당신이 fetchData에 전달하는 매개 변수 외에 또한 인덱스를 얻을 수있는 기능을합니다

$.when(
    $.ajax({ url : 'url1' }), 
    $.ajax({ url : 'url2' }) // or even more calls 
).done(done_callback).fail(fail_callback); 

Answer 2

나는 이런 식으로 뭔가를 할 것 arrParams 내에서 모든 요소에 대해 작동하는 루프 호출에서 호출됩니다. 성공 함수에서 요소에서 처리 된 집합을 true로 설정하고 배열을 통해 나머지가 true인지 "마지막"인지 확인합니다.

당신이 반대 할 경우 최적의 비트가 될 수 있습니다

var todo = arrParams.length; 

및 성공에 당신이 할 :

if (--todo == 0) { 
    callback(...) 
}