루프에 대한 AJAX 호출이 올바른 배열 위치로 값을 반환하지 않음

루프에 대한 AJAX 호출이 올바른 배열 위치로 값을 반환하지 않음

AJAX를 사용하여 페이지의 범위를 가져와 배열에 넣어야 합니다. 배열에서 주어진 위치는 다음과 같습니다.ifor loop의 (블로그 페이지에 대한 캐싱과 유사한 함수이며, for loop의 범위는 전적으로 가변적입니다).저는 다음과 같은 일을 하고 있습니다.

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. ajax 옵션으로 (그러면...)SJAX?)는 요청이 기본적으로 브라우저를 일시 중지하게 하고, 제가 하려는 것과 반대로 성공 콜백의 i는 항상 11이 되는 반면, 저는 당연히 반환된 데이터를 0에서 10까지 배열의 각 슬롯에 붓기를 원합니다.

라인을 이것으로 교체해 보았습니다.

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

하지만 그것은 아무런 차이가 없었습니다.

문을 닫아야 합니다.

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 장소입니다.bongo[i] = result나중에야 연락이 올 겁니다의 가치.i그 시간은 다릅니다(대부분 11).현재 값을 "트랩" 또는 "캡처"하려면i, 새 범위를 만들어야 합니다.자바스크립트에서 그것을 할 수 있는 유일한 방법은 다른 기능을 사용하는 것입니다.

시도:

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개로 제한합니다.

언급URL : https://stackoverflow.com/questions/2405064/ajax-call-in-for-loop-wont-return-values-to-correct-array-positions