for 루프를위한 AJAX 호출은 배열 위치를 수정하기위한 값을 반환하지 않습니다.

Question

AJAX를 사용하여 페이지 범위를 가져와 배열의 지정된 위치가 i for 루프 (블로그 페이지를위한 캐싱과 같은 기능이며, for 루프의 범위는 완전히 가변적이다). 나는 다음에 가깝다 뭔가를하고 있어요 :

var bongo = new Array(); 

for (i = 0; i < 10; i++) { 

    jQuery.ajax({ type: "GET", url: 'http://localhost', data: queryString, success: function(request) { bongo[i] = request } }) 

} 

문제는, 나는 아약스 옵션에 async: false을 추가하지 않으면 (... 에이잭스를 그것을 만들 것이다?) 것을 요청 기본적으로 일시에 발생하는 브라우저, 내가하려고하는 것에 대해, 성공 콜백의 i는 항상 11이된다. 물론 나는 반환 된 데이터를 배열의 각 슬롯에 0에서 10까지 넣기를 원한다.

은 이걸로 라인을 교체 시도했다 :

bongo[i] = jQuery.ajax({ type: "GET", url: 'http://localhost', data: queryString }).responseText 

그러나 그것은 아무런 차이를 만들지 않았습니다.

Answer 1

당신은 폐쇄가 필요합니다. bongo[i] = result은 나중에야 호출됩니다. 그 당시의 i 값은 다릅니다 (대부분 11 일 가능성이 큽니다). 값을 "트랩"또는 "캡처"하려면 i 값을 새로 작성해야합니다. 자바 스크립트에서 그렇게하는 유일한 방법은 다른 기능입니다.

Answer 2

시도 :

var bongo = []; 
for (i=0; i<10; i++) { 
    $.get("http://localhost", function(result) { 
    bongo.push(result); 
    } 
} 

각 결과는 단순히 배열 인덱스가 정확해야하는 필요성을 해결, 배열에 밀어 얻을 것이다 이쪽으로. 그러나 주문은 보장되지 않습니다. 이것이 요구 사항이라면 다른 접근법이 필요합니다.

이 문제를 해결하는 방법은 여러 가지가 있습니다. 다음은 콜백 객체를 생성하여 상태를 저장하는 방법입니다. 귀하의 경우 그래서

function Callback(array, index, result) { 
    this.array = array; 
    this.index = index; 
    this.result = result; 
    var obj = this; 
    this.func = function() { 
    obj.array[obj.index] = obj.result; 
    }; 
} 

$(function() { 
    var arr = []; 
    for (var i=0; i<4; i++) { 
    var obj = new Callback(arr, i, "result" + i); 
    setTimeout(obj.func, (5-i) * 100); 
    } 
    setTimeout(function() { 
    console.log(arr); 
    }, 500); 
}); 

:

이

function Callback(array, index) { 
    this.array = array; 
    this.index = index; 
    var obj = this; 
    this.callback = function(result) { 
    obj.array[obj.index] = result; 
    }; 
} 

var bongo = []; 
for (i=0; i<10; i++) { 
    var ob = new Callback(bongo, i); 
    $.get("http://localhost", ob.callback); 
} 

은 기본적으로 위의 객체에 모든 데이터를 저장하고, 따라서 각 콜백가 올바른 정보에 액세스 할 수 있습니다 다음은 예입니다.

또한 대부분의 브라우저는 동시 AJAX 요청 수를 호스트 당 2로 제한한다는 것을 기억하십시오.

var bongo = []; 
for (i = 0; i < 10; i++) 
{ 

    (function(i) 
    { 
     jQuery.ajax(
     { 
      type: "GET", 
      url: "http://localhost", 
      data: queryString, 
      success: function(request) { bongo[i] = request } 
     }); 
    })(i); 
} 

는 루프가 인라인 함수가 사람들을 그 루터 기 # 1 장소 :