Почему переменная не изменяется?

Question

[Treniki]

Доброго времени суток. Хочу получить широту и долготу через JS, но глобальные переменные почему-то не изменяются. В div с классом "section" выводятся 0 и 0. В чем ошибка? Разрешение на получение гео-данных браузер получил.

$(document).ready(function() {
	setLocation();
	$('.section').html('<p>Latitude: ' + latitude + '</p><br><p>Longitude: ' + longitude + '</p>');
});

//Set Geo-location Data
var latitude = 0;
var longitude = 0;

function setLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			latitude = position.coords.latitude;
			longitude = position.coords.longitude;
		});
	};
}

UPD #1: вывод в html я сделал для того, чтобы показать, что значения сбиваются на 0 и дальше getCurrentPosition не работают. Мне же нужно, чтобы данные широты и долготы забились в переменные для дальнейшего сравнения с некоторыми данными в других функциях.

Answer 1

[teotlu]

Это потому, что getCurrentPosition — асинхронная операция, вы устанавливаете значения переменных в коллбеке.
И на тот момент, когда вы засовываете их в .section, они ещё не установлены.

Можно поменять код вот так, чтобы заработало.

Comments

[Treniki]

Да, это я понимаю, но мне, по-идеи, и не нужно их выводить. Мне надо забить их в переменные для дальнейшего сравнения с кое-какими данными, но дальше своей функции - они сбиваются на 0.

[teotlu]

Treniki: значит, вам нужно либо проводить сравнение внутри этого коллбека, либо использовать промисы или что-нибудь в этом роде, чтобы, опять же, провести сравнение тогда, когда асинхронный код получит нужные значения.

[Treniki]

teotlu: Понял, спасибо.

Answer 2

[Алексей Уколов]

Метод navigator.geolocation.getCurrentPosition() является асинхронным. Это значит, что в момент заполнения html значения ещё могут быть не получены. Должно быть так:

$(document).ready(function() {
  setLocation();  
});

function setLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      $('.section').html('<p>Latitude: ' + position.coords.latitude; + '</p><br><p>Longitude: ' + position.coords.longitude + '</p>');
    });
  };
}