ajax async array in function

Question

I understand why it doesn' work. But have no idea how to get result:

There is a global array:

var members=[[1,x,y,z],[2,x1,y1,z1],[3,x2,y2,z3]];

function drop() {
  for (var i = 0; i < members.length-1; i++) { 
    setTimeout(function() {
      addMarker();
    }, i * 30);
  }
}

function addMarker() { 
  var marker = new google.maps.Marker({
    position: members[iterator][1],
    icon: pinImage[members[iterator][2]],
    shadow: shadow,
    map: map,
    draggable: false,
    title: members[iterator][3],
    animation: google.maps.Animation.DROP    }); 
  google.maps.event.addListener(marker, 'click', function() {
    $.ajax({
      url : 'ajax/get_infowindow_content.php?id='+members[iterator][0],
      success: function(data) {
        infowindow.close();
        infowindow.setContent(data);
        infowindow.open(map, marker);
      }
    });
  }); 
  markers.push(marker);  
  iterator++;
}

The problem is here:

url : 'ajax/get_infowindow_content.php?id='+members[iterator][0],

when i click the marker, it fires the function and checks the members[iterator][0] but the iterator is the last value of iterator (after the whole loop).

The best solution would be some kind of .value() like:

url : 'ajax/get_infowindow_content.php?id='+members[iterator][0].value(),

but of course it doesn't work.

I'm stacked..

Why don't you just pass members[i] as a parameter to the addMarker() function? — moonwave99
– moonwave99, Commented Dec 15, 2012 at 17:00
you mean: function drop() { for (var i = 0; i < members.length-1; i++) { setTimeout(function() { addMarker(members[i]; }, i * 30); Let's try! } } — Tomasz Brzezina
– Tomasz Brzezina, Commented Dec 15, 2012 at 17:05
No, it wouldn't work for exactly the same reason members[i] after loop is always the same — Tomasz Brzezina
– Tomasz Brzezina, Commented Dec 15, 2012 at 17:07
Plus it isn't clear why you wrap everything in a setTimeout, assuming your server will answer in 30ms at most every time: wouldn't it be better to fetch all the collection at once instead of making N calls? — moonwave99
– moonwave99, Commented Dec 15, 2012 at 17:07

adeneo · Accepted Answer · 2012-12-15 17:10:37Z

2

You just need a closure and to pass a parameter to the addMarker function :

var members = [[1, x, y, z], [2, x1, y1, z1], [3, x2, y2, z3]];

function drop() {
    for (var i = 0; i < members.length; i++) {
        (function(j) {
            setTimeout(function() {
                addMarker(members[j]); //pass the value
            }, i * 30);
        })(i); //closure to keep the value
    }
}

function addMarker(member) {
    var marker = new google.maps.Marker({
        position: member[1],
        icon: pinImage[member[2]],
        shadow: shadow,
        map: map,
        draggable: false,
        title: member[3],
        animation: google.maps.Animation.DROP
    });
    google.maps.event.addListener(marker, 'click', function() {
        $.ajax({
            url: 'ajax/get_infowindow_content.php?id=' + member[0],
            success: function(data) {
                infowindow.close();
                infowindow.setContent(data);
                infowindow.open(map, marker);
            }
        });
    });
    markers.push(marker);
}

answered Dec 15, 2012 at 17:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

adeneo Over a year ago

Did'nt see the updated comment there, but yes, it should work just fine. I even made a FIDDLE to make sure it keeps the values.

charlietfl · Accepted Answer · 2012-12-15 17:11:34Z

0

Try passing i as an argument of addMarker()

function addMarker(i){/* code*/}

Then in loop:

setTimeout(function() {
      addMarker(i);
    }, i * 30);

answered Dec 15, 2012 at 17:11

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Tomasz Brzezina Over a year ago

No, it would not work - because this is async function, and i is equal to last value of loop

charlietfl Over a year ago

need to store value in a variable just before setTimeout and pass that variable then

Collectives™ on Stack Overflow

ajax async array in function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related