javascript - How can I pass a parameter to a function without it running right away? - Stack Overflow

admin管理员组

文章数量:1147229

I'm having somewhat of an odd issue with trying to piece together a somewhat dynamic Google Maps display. I have overlays on a map that I would like to call a function when clicked. Initially I had everything hard coded, so I had a function for each overlay like this:

google.maps.event.addListener(southEast, 'click', showSouth);
function showSouth() {
   // do stuff
}

This worked without a problem, but then I made the whole page more dynamic so I decided to make one function that would pass an ID and then display based on that, which is how I feel it should have been set up originally anyway. I altered the code to look more like this:

google.maps.event.addListener(southEast, 'click', showArea(1));
function showArea(id) {
   // do stuff based on that id
}

The function worked, but the problem is it gets called immediately on page load. After researching I've learned that when you call a function with the parentheses, that function gets called immediately and then it's return value is referenced. source

So now I'm a little stuck as to how exactly to go about passing that ID to the function without having it call the function immediately. I've found some hacky ways of doing it that might work, but I feel like this shouldn't be something I have to hack together...

I'm having somewhat of an odd issue with trying to piece together a somewhat dynamic Google Maps display. I have overlays on a map that I would like to call a function when clicked. Initially I had everything hard coded, so I had a function for each overlay like this:

google.maps.event.addListener(southEast, 'click', showSouth);
function showSouth() {
   // do stuff
}

This worked without a problem, but then I made the whole page more dynamic so I decided to make one function that would pass an ID and then display based on that, which is how I feel it should have been set up originally anyway. I altered the code to look more like this:

google.maps.event.addListener(southEast, 'click', showArea(1));
function showArea(id) {
   // do stuff based on that id
}

The function worked, but the problem is it gets called immediately on page load. After researching I've learned that when you call a function with the parentheses, that function gets called immediately and then it's return value is referenced. source

So now I'm a little stuck as to how exactly to go about passing that ID to the function without having it call the function immediately. I've found some hacky ways of doing it that might work, but I feel like this shouldn't be something I have to hack together...

• javascript
• google-maps

Share Improve this question Follow edited May 23, 2017 at 12:34 CommunityBot 111 silver badge asked Mar 9, 2012 at 17:24 Matt McClureMatt McClure 2,13622 gold badges1818 silver badges2020 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 43

Have showArea return a function that works with the id.

function showArea(id) {
   return function() {
       // do stuff with id
   };
}

The returned function closes over id so it continues to reference it, and is passed to addListener to be used as the handler.

---

Alternately, you could just inline the function that calls showArea(1)...

google.maps.event.addListener(southEast, 'click', function() { showArea(1); });
function showArea(id) {
   // do stuff based on that id
}

This will work because you're hardcoding the 1. If it was a variable that could change, like in a loop, you'd use the first example.

Try using bind().

You could also use bind() that binds the function and allows you to pass parameters to that method, without running the method on initialization.

google.maps.event.addListener( southEast, 'click', showArea.bind( this, 1 ) );

With bind(), the first parameter is always the context (e.g. this) and any other parameters will be passed to the method itself. So,

• your first method parameter is passed as the second parameter in bind,
• your second method parameter is passed as the third parameter in bind,
• etc.

Note, I'm not a Javascript expert so not sure if there are any implications with this strategy that I'm overlooking.

myFunction(msg) {console.log(msg)} // example function

myFunction('hello world') // myFunction called "immediately"

() => myFunction('hello world') // myFunction not called here; returns myFunction

function() { return myFunction('hello world') } // myFunction not called here; returns myFunction

本文标签： javascriptHow can I pass a parameter to a function without it running right awayStack Overflow