JavaScript - как работать с итератором в цикле for с обратными вызовами

Question

Я пытаюсь в цикле for получить доступ к значению i, с которым использует функция обратного вызова.

Как я могу это сделать?

for (var i = 0; i < a.length; i++)
{
    calcRoute(fixedLocation, my_cities[i].address, function(response) {

        // i want here to have the current "i" here

    });             
}

который звонит ...

function calcRoute(x, y, callback) {

    var start = x;
    var end = y;

    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        optimizeWaypoints: true
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            callback(response);                                                                 
        } else {
            alert("City unknown.")
        }       
    }); 
}

Answer 1

Это потому, что замыкание захватывает саму переменную i, а не текущее значение.Попробуйте:

for (var i = 0; i < a.length; i++) (function(i)
{
    calcRoute(fixedLocation, my_cities[i].address, function(response) {

        // i want here to have the current "i" here

    });             

}) (i);

, которая создаст новую переменную i для каждой итерации цикла.

Answer 2

Наверное, самый элегантный способ сделать это - просто использовать Array.forEach:

a.forEach(function(someA, i) {
    calcRoute(fixedLocation, my_cities[i].address, function(response) {

        // i want here to have the current "i" here

    });
});

Функция обратного вызова передается:

1. текущий элемент
2. текущий индекс
3. массив, к которому он был вызван

Отсутствие аргументов означает, что вы не можете получить к ним доступ в обратном вызове. (Часто вы пропускаете индекс и просто используете текущий элемент).

---

Если a - это NodeList, который не имеет forEach, просто сделайте:

Array.forEach.call(a, function(someA, i) { ... }

Answer 3

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

  function createCallback(i) {
    return function(response) {
      // i want here to have the current "i" here
    }
  }

  calcRoute(fixedLocation, my_cities[i].address, createCallback(i));
}