3

1) Есть такая функция c параметром:

function check_Smth () {
  ..
};

Хочу чтобы она вызывалась при скроллинге страницы. Пишу:

$window.on('scroll', check_Smth});

Всё работает.

2) Хочу добавить параметр для универсальности:

function check_Smth (param) {
  ..
};

Вызываю обработчик:

$window.on('scroll', check_Smth(param1)});

Не работает ((

Пришлось переделать в такой формат:

$window.on('scroll', function () {
        check_Smth(param1);
 });

Нет понимания почему не работает второй вариант. Кто-нибудь может объяснить доступным языком, подробно, почему он не работает ?

allweek
  • 51

1 Answers1

3

На самом деле, в документации все довольно неплохо описано. Однако, постараюсь объяснить простым языком.

Когда вы создаете такой код:

$window.on('scroll', function () {
    check_Smth(param1);
});

Вы делаете function declaration. Иными словами, вы определяете функцию, которая будет вызываться каждый раз, когда срабатывает событие, при этом не вызывая саму функцию.

То же самое происходит, когда Вы делаете так:

function check_Smth () {
  ..
}; 

$window.on('scroll', check_Smth});

Сначала вы декларируете функцию, затем Вы ее "аттачите", но не вызываете ее.

Когда же Вы делаете так:

$window.on('scroll', check_Smth(param1)});

Вы выполняете вызов функции при попытке аттача хэндлера для события scroll.

В данном случае Ваша функция выполнится и вернет undefined.

Далее, этот undefined и заатачится как хендлер к событию onScroll:

  • -> попытка attach'a handler'a для onScroll события
  • -> вызов переданной function
  • -> function возвращает 'undefined'
  • -> ничего не работает

Решить данную проблему можно было бы еще и так:

function check_Smth(param1) {
  return function() {
      //...
  }
}; 

$window.on('scroll', check_Smth(param1)});

В этом случае, у Вас вызовется функция, которая возвращает функцию, которая и станет обработчиком, а не undefined.

По большому счету, это вопрос разницы function call vs function reference

Кроме того, конструкция:

$window.on('scroll', check_Smth(param1)});

С точки зрения использования jQuery не является верной, так как param1 в данном случае будет содержать event, а не нужный Вам параметр.

P.S. подобные вопросы, кстати, часто ставят в тупик людей на собеседованиях =) Вроде и понятно, почему не работает, а объяснить не могут =)

Mr. Brightside
  • 1,592