如何在没有立即运行的情况下将参数传递给函数？

Question

我试图拼凑一个有点动态的谷歌地图显示器时遇到了一些奇怪的问题。我在地图上覆盖了我想在点击时调用的功能。最初我将所有内容都硬编码，所以我为每个叠加层都有一个函数：

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

这没有问题，但后来我使整个页面更加动态，所以我决定制作一个能传递ID然后根据它显示的功能，这就是我觉得应该最初设置它的方式。我将代码更改为更像这样：

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

该功能有效，但问题是它会在页面加载时立即调用。经过研究我已经了解到，当你用括号调用一个函数时，会立即调用该函数，然后引用它的返回值。 source

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

Answer 1

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

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

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

---

或者，您可以内联调用showArea(1) ...

的函数

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

这样做会有效，因为您正在对1进行硬编码。如果它是一个可以改变的变量，就像在循环中那样，你可以使用第一个例子。

Answer 2

尝试使用bind()。

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

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

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

• 您的 first 方法参数作为 second 参数在bind中传递，
• 您的 second 方法参数作为 third 参数在bind中传递，
• 等

注意，我不是Java语言专家，所以不确定我是否忽略了此策略的任何影响。

Answer 3

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