Передача индекса из цикла for в функцию обратного вызова ajax (JavaScript)

Question

У меня есть цикл for, содержащий вызов ajax, и я пытаюсь определить лучший метод для передачи индекса из цикла for в функцию обратного вызова. Вот мой код:

var arr = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010];

for (var i = 0; i < arr.length; i++)
{
  $.ajaxSetup({ cache:false })
  $.getJSON("NatGeo.jsp", { ZipCode: arr[i], Radius:   
            document.getElementById("radius").value, sensor: false },      
            function(data)
            { 
              DrawZip(data, arr[i]);
        }
  );
}

В настоящее время только последнее значение массива arr передается из-за асинхронного вызова ajax. Как я могу передать каждую итерацию массива arr в функцию обратного вызова, кроме выполнения синхронного вызова ajax?

Answer 1

Вы можете использовать закрытие JavaScript:

for (var i = 0; i < arr.length; i++) {
  (function(i) {
    // do your stuff here
  })(i);
}

Или вы могли бы просто использовать $.each:

var arr = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010];

$.each(arr, function(index, value) {
  $.ajaxSetup({ cache:false });
  $.getJSON("NatGeo.jsp", { ZipCode: value, Radius:   
    document.getElementById("radius").value, sensor: false },      
    function(data) { 
      DrawZip(data, value);
    }
  );
});

Answer 2

Я не прочитал все 30 вопросов из списка @Anurag, но нашел следующий синтаксис обратного вызова, который, кажется, работает:

(function(year) {
  return (function(data) {DrawZip(data, year);});
})(arr[i])

Это заменяет оригинал function(data), Кстати, результаты в случайном порядке, из-за асинхронного ответа

Answer 3

Вы можете даже опустить скобки для цикла, как упомянуто Джоном Резигом здесь, я думаю, что этот способ более читабелен

for (var i = 0; i < arr.length; i++) (function(i) {

    // async processing
    setTimeout(function(){ 
      console.log(i);
    }, i * 200); 

})(i);