jQuery .on() 方法立即调用函数

Question

我不是 JavaScript 专家（远非如此），我只是对 jQuery 有肤浅的经验——没什么太花哨的。我有以下代码：

    // show search forms
    searchButton = jQuery('#show-search');
    searchForm = jQuery('#search-form');

    function toggleSearch() {
        searchButton.button('toggle');

        searchForm.slideToggle(300, function() {
                searchForm.find('#value').focus();
            });
    }

    searchButton.on('click', toggleSearch());

当页面加载时，#search-form 实际上被激活并向下滑动，无需调用函数（即实际上单击按钮）。

According to this post我可以这样传递函数：

    searchButton.on('click', toggleSearch);

它会像我这样做一样做：

    searchButton.on('click', function() {
        toggleSearch();
    });

有效。两种方法都可以。

• 为什么这行得通，为什么我不能只使用第一种形式？ （路过toggleSearch()）
• 如果有一个名为 toggleFunction 的变量带有一些随机值怎么办？不是传给函数吗？

编辑：我知道this excellent answer，但它没有解释“参考”部分，也没有解释先前分配的变量的情况。在这些情况下是否需要匿名函数？我应该每次都使用它们吗？

Answer 1

() 让你执行函数，如果你使用toggleSearch()，你将返回值（※在你的情况下是undefined）传递给.on，而不是函数本身。

toggleFunction是函数名，也是变量，同

var toggleFunction = function() {/*...*/};

所以如果有另一个变量叫做toggleFunction，toggleFunction 就会改变。

Answer 2

当您使用toggleSearch() 时，您实际上正在运行该函数，并且该函数的返回用作处理程序。当您省略括号时，您将传递对函数的引用，并且函数本身将在事件发生时被调用。

对于“工作”的两个功能，第一个是如我所描述的。在第二个中，您将一个匿名函数引用作为处理程序传递。这个匿名函数在被调用时运行方法，而不是在定义时运行，因此其工作方式与仅传递函数引用相同。如果您需要将参数传递给函数，第二种方法就是这样做的方法。

searchButton.on('click', function() { // this is the handler
    // this is run when the hander executes
    toggleSearch( 'some parameter', 'some other parameter' );
});