Pass parameter to callback function

Question

My code

// do ajax request and get JSON response

for (var i = 0; i < data.results.length; i++) {  
    result = data.results[i];
    // do stuff and create google maps marker    
    marker = new google.maps.Marker({  
        position: new google.maps.LatLng(result.lat, result.lng),   
        map: map,  
        id: result.id  
    });  
    google.maps.event.addListener(marker, 'click', function() {  
        createWindow(marker.id); //<==== this doesn't work because marker always points to the last results when this function is called
    });  

}

How to solve this?

nlogax · Accepted Answer · 2009-11-03 19:10:35Z

24

Try this:

with ({ mark: marker }) {
    google.maps.event.addListener(mark, 'click', function() {  
        createWindow(mark.id);
    });
}

An example that demonstrates the use of with:

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 1000);
}

The above will log 10 ten times.

for (var i = 0; i < 10; i++) {
    with ({ foo: i }) {
        setTimeout(function() { console.log(foo); }, 1000);
    }
}

This will log 0 to 9, as desired, thanks to with introducing a new scope.

JavaScript 1.7 has a let statement that is nicer, but until that is widely supported, you can use with.

And use var for your variables.

edited Nov 3, 2009 at 19:10

answered Nov 2, 2009 at 21:20

nlogax

1,0916 silver badges9 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:47:36Z

4

The classic closure problem strikes again!

  google.maps.event.addListener(marker, 'click', function(id) {
    return function(){
      createWindow(id); //<==== this doesn't work because marker always points to the last results when this function is called
    }
  }(marker.id));

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Nov 2, 2009 at 20:02

Peter Bailey

106k32 gold badges186 silver badges206 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:33:17Z

1

Looks like you've got a closure problem. See these questions:

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Nov 2, 2009 at 20:06

Chris B

15.9k5 gold badges35 silver badges40 bronze badges

Comments

Wilianto Indrawan · Accepted Answer · 2013-08-01 18:31:26Z

1

try this one

var marker = new Array();
for (var i = 0; i < data.results.length; i++) {  
    result = data.results[i];
    // do stuff and create google maps marker    
    marker[i] = new google.maps.Marker({  
        position: new google.maps.LatLng(result.lat, result.lng),   
        map: map,  
        id: result.id  
    });  
    google.maps.event.addListener(marker[i], 'click', example(marker[i].id));  

}

create new function

function example(my_window){
    return function(){
        createWindow(my_window);
    }
}

answered Aug 1, 2013 at 18:31

Wilianto Indrawan

2,4043 gold badges22 silver badges27 bronze badges

Collectives™ on Stack Overflow

Pass parameter to callback function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related