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

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
}

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

所以现在我有点担心如何将该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），任何其他参数都将传递给方法本身。所以，

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

请注意，我不是 Javascript 专家，所以不确定我忽略的这个策略是否有任何影响。

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