Как устроен синтаксис обработчика $(window).on('scroll')?

240
09 декабря 2017, 07:18

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);
 });

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

Answer 1

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

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

$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. подобные вопросы, кстати, часто ставят в тупик людей на собеседованиях =) Вроде и понятно, почему не работает, а объяснить не могут =)

READ ALSO
Недосоздаются ячейки в js

Недосоздаются ячейки в js

Всем приветыЕсть код Кому лень читать их вот ссылка на кодпен с удобным чтением кода https://codepen

249
Как сделать слайдер div блоков на js

Как сделать слайдер div блоков на js

Есть несколько блоков , необходимо что бы они поочередно переключались и присутствовали кнопки кнопки перехода по блокам , те

278
просмотр 360 градусов [требует правки]

просмотр 360 градусов [требует правки]

друзья посоветуйте видео, плагин скрипт)) чтобы реализовать)) вот такое

251
Нужна помощь с мета тегами Face Book

Нужна помощь с мета тегами Face Book

Добрый вечерДо не давнего времени теги определялись нормально и все новости на сайте шарились отлично

328