여러 Ajax 요청에서 총 가져 오기

Question

여러 Ajax 요청의 반환에서 총을 얻으려고하고 있습니다. 지금은 훨씬 더 나은 솔루션이라고 생각하므로 지금 바로 동기화를 사용합니다.

여기에 동기 JS를 사용하지 않고 전체 작업을 할 수있는 방법이 있나요

get_total = function(trend, duration) { 
    var keyword, total, url, _i, _len, _ref; 
    total = 0; 
    _ref = trend.search_terms; 
    for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
     keyword = _ref[_i]; 
     url = "http://otter.topsy.com/search.json?q=" + keyword + "&window=" + duration; 
     $.ajax({ 
     url: url, 
     async: false, 
     success: function(data) { 
      return total += data.response.total; 
     } 
     }); 
    } 
    return total; 
    }; 

에 잘 컴파일 내 커피

get_total = (trend, duration) -> 
    total = 0 
    for keyword in trend.search_terms 
    url = "http://otter.topsy.com/search.json?q=#{keyword}&window=#{duration}" 
    $.ajax 
     url: url 
     async: false 
     success: (data) -> 
     total += data.response.total 
    total 

입니다.

나는 $ .when(). then()을 실험했지만 요청의 크기가 동적 일 때 문제가 발생했습니다.

Answer 1

내가 커피 스크립트를 모른다는 순수 jQuery를 솔루션입니다. 모든 요청이 완료되면 콜백을 호출 할 수 있습니다.

이 예제는 jQuery의 Deferred objects ^[docs] 사용한다 :

function get_total(trend, duration, callback) { 
    var deferreds = [], total = 0; 

    for(var i = 0, l = trend.search_terms.length; i < l; i++) { 
     deferreds.push($.get("http://otter.topsy.com/search.json?q=" + trend.search_terms[i] + "&window=" + duration, function(data) { 
      total += data.response.total; 
     })); 
    } 

    $.when.apply($, deferreds).then(function() { 
     callback(total); 
    }); 
} 

사용법 :

get_total(trend, 200, function(total) { 
    // now execute the code that needs `total` 
}); 

당신이 값을 반환 get_total이 필요하면, 당신은 동기 호출을해야한다. 일반적으로 이는 여러 가지 요청을 할 때 특히 바람직하지 않습니다. 브라우저의 UI가 고정됩니다. 콜백을 사용하도록 코드를 재구성하는 것이 좋습니다.

업데이트 : 방금 ​​질문의 마지막 문장을 읽었습니다. .apply()^[MDN]을 사용하여 동적 인수를 함수에 전달할 수 있습니다.

업데이트 2 : 물론 서비스를 제어 할 수 있다면 여러 개의 Ajax 요청을 피하기 위해 여러 개의 키워드를 허용해야합니다.

Answer 2

물론, 모든 아약스 요청이 언제 반환되었는지 파악하기 위해 상태 추적을 추가 한 다음 생성 된 합계를 전달하는 함수를 호출해야합니다. 비동기 요청으로 전환하면 AJAX 요청이 실행 된 직후 '합계'가 반환됩니다.이 경우 0 또는 몇 개의 요청이 반환되었을 수 있으므로 잘못된 총계가 표시됩니다.

할 수 있습니다하지 반환 동기 호출을하지 않고 get_total에서 값 : 그래서 여기

var requestsOutstanding = 0; 
var total = 0; 
for (i = 0; i < _ref.length) { 
    keyword = _ref[i]; 
    url = "..."; 
    requestsOutstanding++; 
    $.ajax({ 
     url: url, 
     async: true, 
     success: function(data) { 
      total += data.response.total; 
      requestsOutstanding--; 
      if (requestsOutstanding == 0) { 
      totalResultIsAvailable(total); // trigger next stage of events here 
      } 
     } 
    }); 
} 

Answer 3

내가 커피 스크립트를 모르겠지만, JS에서이 일을 당신이 클로저를 사용할 수 있습니다

var total_trend = (function() { 
    var total = 0, 
     num_adds = 0; 

    return { 
     add_to_total: function(add) { total += parseInt(add, 10); num_adds += 1; }, 
     get_total: function() { return total; }, 
     get_deferred_total: function(expected, callback) { 
      if(num_adds !== expected) { 
       var _this = this; 
       setTimeout(function(){ return _this.get_deferred_total(expected, callback); }, 100); 
      } else { 
       callback(total); 
      } 
     } 
    }; 
})(); 

는 아약스 콜백 다음 콜백가 액세스 할 수있는 변수로이 정의는 수행

total_trend.add_to_total(data.response.total); 

당신은 총 할 때 :

total_trend.get_total(); 

을 당신은 add_to_total 때까지 총을 연기하려는 경우 add_to_total 5 번 호출 된 경우 위의 콜백 함수가 불려가는 경우

var expected_num_calls = 5; 
total_trend.get_deferred_total(expected_num_calls, function(total) { alert(total); }) 

: 통화의 주어진 양을했다.

---

EDIT : Felix가 지적한대로 원래 버전은 ajax 호출이 완료 될 때까지 대기하지 않습니다. 이 코드는 총 지연을 지원하도록 업데이트되었습니다. 이것은 효과가 있지만, Felix의 대답은이 시점에서 좀 더 깨끗합니다.