JavaScript, jQuery. Не включается функция при событии

Question

Не могу понять, почему если я создал функцию выше и потом просто задаю её имя в обработчик событий, то она не работает?
Но если вписать её полностью заново в обработчик, то все работает:

$(document).ready(function(){

var leftOfSet = 0;

function moveHeading() {
$('#heading').offset({left: leftOfSet});
leftOfSet = leftOfSet + 50;

if(leftOfSet > 200) {
    leftOfSet = 0;
}
}

$('#heading').click(moveHeading());

});

При:

$('#heading').click(function moveHeading() {
$('#heading').offset({left: leftOfSet});
leftOfSet = leftOfSet + 50;

if(leftOfSet > 200) {
    leftOfSet = 0;
}
});

Работает.

score 0 · Answer 1 · answered May 02 '17 at 17:23

Вы вызываете функцию moveHeading и, получается, передаете в click ее результат (т.к. в ней нет return, то возвращаемый результат - undefined), а вам нужно передавать саму функцию:

$('#heading').click(moveHeading);

score 0 · Answer 2 · answered Jan 23 '18 at 11:36

В первом варианте на строке

$('#heading').click(moveHeading);

Стоят круглые скобочки "()", что означает выполнять сейчас( точнее когда интерпретатор дойдет до этой строчки. Но Вам не это требуется, Вам требуется выполнить это тогда, когда произойдет определенное событие, вашем случае это клик. Чтобы это сделать, мы должны передать ссылку на функцию ( передать не выполняя ее). Т.е как обычную переменную без ().

Второй вариант, можно сделать так:

$('#heading').click(function() {
   $(this).offset({left: leftOfSet});

   leftOfSet = leftOfSet + 50;

   if(leftOfSet > 200) {
       leftOfSet = 0;
   }
});

JavaScript, jQuery. Не включается функция при событии

2 Answers2