jQuery .on() метод, вызывающий функцию inmediatly

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 с некоторым случайным значением? Разве это не будет передано вместо функции?

EDIT: Я знаю 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'); 
});