Почему функции, определенные вне функции обработчика событий, необходимо сохранять в новых переменных внутри обработчика событий?

Question

Javascript новичок здесь снова.

Мне не нужно знать как что-то делать, мне просто нужна помощь понимание что-то.

Я только что выполнил задание по кодированию в книге для начинающих, которую я читаю, в которой вас просят создать игру, в которой пользователь должен искать «похороненное сокровище» на карте сокровищ. Игра рассчитывает расстояние каждого клика от случайно выбранного местоположения «сокровища» и отображает другое более горячее / холодное сообщение, пока игрок не выиграет.

Чего я не понимаю, так это того, что все функции, которые я определяю вне функции обработчика события щелчка, должны быть сохранены как новые переменные внутри функции обработчика события. Это полностью смущает меня. Почему я не могу просто вызвать эти функции? Смотрите весь мой сценарий ниже:

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

<script type="text/javascript">

//This function returns a random number that will be used as an argument to determine random coordinates for the location of the buried treasure.
var randomNumber = function (size) {
  return Math.floor(Math.random()*size);
}

//Variables used as arguments for the randomNumber function.
var width = 400;
var height = 400;

//Click counter variable.
var clicks = 0;

//Object representing the location of the buried treasure on the map.
var target = {
  x: randomNumber(width),
  y: randomNumber(height)
}

/* This function takes the event object and the buried treasure location object
and uses the Pythagorean theorem to determine a straight line between the click event
and the treasure location. Locations on the page and events on the page are always objects,
never simple variables containing a string or integer.
*/
var getDistance = function (event, target) {
  var diffX = event.offsetX - target.x;
  var diffY = event.offsetY - target.y;
  return Math.sqrt((diffX*diffX) + (diffY*diffY));
}

//This function takes distance as an argument and returns a message to the user depending on how far from the treasure location their click is.
var hints = function (distance) {
  if (distance < 10) {
    return "Red hot!";
  } else if (distance < 20) {
    return "Very hot!";
  } else if (distance < 40) {
    return "Hot";
  } else if (distance < 80) {
    return "Warm";
  } else if (distance < 160) {
    return "Cold";
  } else if (distance < 300) {
    return "Very cold!";
  } else {
    return "Ice cold! Brrrr";
  }
}

//Click handler function.
$("#map").click(function () {

  clicks++;

/* If you simply call the functions defined outside of the click handler function, the program will not
run correctly. Instead, the functions defined outside of the click handler function must be saved
in new variables and those variables used in the place of the functions in order for the program to
execute properly. This is what confuses me.
*/
  var distance = getDistance(event, target);
  var distanceHint = hints(distance);

  $("#hints").text(distanceHint);

  if (distance < 9) {
    alert("Treasure found in " + clicks + " clicks!");
  }

});




</script>

Как видите, функция getDistance и функция hints сохраняются в новых переменных внутри обработчика событий. Если бы я попытался просто вызвать эти функции внутри обработчика событий, не сохраняя их сначала в новых переменных, игра не будет работать так, как задумано. То же самое, если я определил эти функции внутри обработчика событий, а затем вызвал их. Может ли кто-нибудь помочь мне понять, почему это так? Большое, большое спасибо.

Answer 1

Переменные distance и distanceHint сохраняются или, если быть более точным, назначаются внутри обработчика событий, а не getDistance и hints.

В дальнейшем distance и distanceHint являются новыми переменными здесь, а следующее просто означает, что их значения присваиваются значениям getDistance и hints и всякий раз, когда значения getDistance и hints обновляются, они передают значения в переменные distance и distanceHint соответственно.

var distance = getDistance(event, target); // if getDistance(event, target) = ABC, then distance is now also equal to ABC
var distanceHint = hints(distance);// if hints(distance) = XYZ, then distanceHint is now also equal to XYZ

Answer 2

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

В случае ссылки на функцию, присвоенной переменной getDistance, когда вы вызываете эту функцию и передаете event и target, она возвращает вычисленное число. Это то вычисленное число, которое вы присваиваете переменной с именем distance для использования в другом месте