javascript - 如何在不立即运行的情况下将参数传递给函数？

Question

我在尝试拼凑动态的 Google map 显示时遇到了一些奇怪的问题。我在 map 上有叠加层，我想在单击时调用一个函数。最初我对所有内容进行了硬编码，因此我为每个覆盖层都设置了一个函数，如下所示:

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 进行硬编码。如果它是一个可以更改的变量，例如在循环中，您将使用第一个示例。