Почему не работает return?

Question

[Робот]

<div id="echo"></div>

document.addEventListener("mousemove", function() 
{ 
  var coord = [];
	coord[0] = event.clientX+'px';
	coord[1] = event.clientY+'px';
	return coord;
});
document.getElementById('echo').innerHTML=coord;

Ошибка Uncaught ReferenceError: coord is not defined ( в строке 8)

Пробовал вынести создание из функции, потом передать в неё, пополнить и вернуть так:

var coord = [];
document.addEventListener("mousemove", function(coord) 
{ 
	coord[0] = event.clientX+'px';
	coord[1] = event.clientY+'px';
	return coord;
});
document.getElementById('echo').innerHTML=coord;

Ошибок нет, но и не выводит ничего на экран...

Answer 1

[Денис Инешин]

return имеет смысл только в синхронных функциях. Вот так:

function calc (a, b) {
    return a + b;
}

var c = calc (2, 2); // 4

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

document.addEventListener("mousemove", function (e) {
  var coord = [];
  coord[0] = e.clientX+'px';
  coord[1] = e.clientY+'px';

  next(coord); // вызов коллбэка
});

function next (coord) {
  console.log(coord);
}

Помимо коллбэков существуют и другие подходы, например обещания. В jQuery есть кроссбраузерная реализация.

Comments

[Робот]

О да, сам Бог ЯваСкрипта снизошёл ко мне! ))) Спасибо большое у меня была мысль о том что когда курсор вне поля то значение не определено... Я думал коллбэк это что-то более сложное. Спасибо всё работает конечно!

[Робот]

Робот: Ещё только вопрос что такое "е" в function (e) по логике кода понятно вроде что это event но как?

[Денис Инешин]

Робот: е - это всего лишь переменная, можете назвать event, можете как-то еще. e/ev/event - общепринятые названия.

[Денис Инешин]

Робот: суть в том, что вы 1. создаете слушатель для события мыши, 2. Передаете ему в качестве аргумента анонимную фукнцию-коллбэк. 3. Эта функция будет вызвана слушателем при наступлении события. 4. Данные о событии или объект события будет передан первым аргументом в эту функцию. 5. Так что как не назови первый аргумент, хоть vasya, он получит объект с данными события.

[Робот]

Денис Инешин: да это я понял, вот добавил просто ещё одно событие клик https://jsfiddle.net/1bh5hhyn/3/ , и теперь "coord" никак не могу передать в событие при клике что за беда...

[Денис Инешин]

https://jsfiddle.net/IonDen/1bh5hhyn/6/

[Денис Инешин]

Робот: Даже лучше вообще вот так: https://jsfiddle.net/IonDen/1bh5hhyn/7/

[Робот]

Денис Инешин: О блин ну я тупарь, точно! Хотя вопрос связанности функций между собой и передачи между ними переменных остаётся некоторой загадкой....

[Денис Инешин]

Робот: вариант 7 посмотрите

Answer 2

[Петр]

В первом варианте coord у вас является локальной переменной.
А во втором варианте вы перекрываете глобальную coord, локальной.

document.addEventListener("mousemove", function( ---> coord <---- )

Удалите выделенное и будет вам счастье

Comments

[Робот]

Удалил, теперь просто function() ошибок нет но и экран пустой...