javascript 如何将参数传递给函数而不立即运行？

How can I pass a parameter to a function without it running right away?

提问by Matt McClure

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:

这没有问题，但后来我让整个页面更加动态，所以我决定制作一个函数来传递一个 ID 然后基于它显示，这就是我觉得它本来应该是如何设置的。我改变了代码看起来更像这样：

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...

所以现在我有点不知道如何将 ID 传递给函数而不让它立即调用函数。我找到了一些可行的方法，但我觉得这不应该是我必须一起破解的东西......

回答by

Have showAreareturn a function that works with the id.

有showArea返回一个与 id 一起使用的函数。

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

The returned function closes over idso it continues to reference it, and is passed to addListenerto be used as the handler.

返回的函数关闭，id因此它继续引用它，并传递给addListener用作处理程序。

---

---

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

或者，您可以内联调用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.

这会起作用，因为您正在硬编码1. 如果它是一个可以改变的变量，比如在循环中，你会使用第一个例子。

回答by Joshua Pinter

Try using bind().

尝试使用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.

您还可以使用bind()它绑定函数并允许您将参数传递给该方法，而无需在初始化时运行该方法。

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,

使用bind()，第一个参数始终是上下文（例如this），任何其他参数都将传递给方法本身。所以，

• your firstmethod parameter is passed as the secondparameter in bind,
• your secondmethod parameter is passed as the thirdparameter in bind,
• etc.

• 您的第一个方法参数作为第二个参数传递bind，
• 您的第二个方法参数作为第三个参数传递bind，
• 等等。

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

请注意，我不是 Javascript 专家，因此不确定我忽略的此策略是否有任何影响。

回答by Geoffrey Hale

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