Javascript with callbacks

Question

its been a while since i have programmed in Javascript. Basically i want to get geo location of a person and then pass the variables which are the coords into another function which will do something for me. but what happens is, javascript is running along and basically i get undefined as expected. how do i make a simple call back on getLocation function? I want as getLocation finished and lat and lng are defined do some function, i want it in the alert Thanks.

var x = document.getElementById("demo");
var lat = 0;
var lng = 0;
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
   lat = position.coords.latitude;
   lng = position.coords.longitude;
}
getLocation();
alert(lat);

"basically i get undefined" — Where do you get `undefined`? — Quentin, Aug 24 '15 at 13:23
Quentin i fixed my question, i want it in the alert, i get 0; — jojo, Aug 24 '15 at 13:27
You've put the `alert` outside the callback. Don't do that. It should give you `0` though, not `undefined`. — Quentin, Aug 24 '15 at 13:27
Try putting alert(lat) IN showPosition. What is (likely) happening is that your code reaches `alert(lat)`; BEFORE showPosition has been executed. basically.. you cannot use lat/lng until the callback is done :) — Terry Seidler, Aug 24 '15 at 13:28
Hey Terry, i forgot how to do it, could you please make an example of just the call back. I know that it reaches :p — jojo, Aug 24 '15 at 13:28
@jojo — You move the one line that Terry told you to move to the place he told you to put it. — Quentin, Aug 24 '15 at 13:29
(have a look at http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Terry Seidler, Aug 24 '15 at 13:30
As I understand it, when `getLocation()` returns, `lat` isn't re-assigned yet, because the callback is called later. — Wolf, Aug 24 '15 at 13:31

score 1 · Answer 1 · answered Aug 24 '15 at 13:30

1

function showPosition(position) {
  lat = position.coords.latitude;
  lng = position.coords.longitude;
  alert(lat);
}

answered Aug 24 '15 at 13:30

Jasper Giscombe

313
1
5

Hey Jasper, this is not a callback, i requested a call back – jojo Aug 24 '15 at 13:30
1

@jojo: `showPosition` *is* your callback function. That's what you're passing to the asynchronous operation. – David Aug 24 '15 at 13:31
David i explain you that i want it after the callback of geolocation – jojo Aug 24 '15 at 13:33
1

@jojo: Yes, that's *exactly* what's happening here. The geolocation API is asynchronous, so you pass it a function reference as a callback. `showPosition` is the function reference you're currently passing to it. So anything you want to happen as part of the callback needs to be inside of or invoked by `showPosition`. – David Aug 24 '15 at 13:35
@David, i know it is a callback, I am asking you how to make a callback. – jojo Aug 24 '15 at 13:37
1

@jojo: You *did* make a callback. Your `showPosition` function is being used *as a callback*. I'm not really sure how to explain it more simply than this. When the geolocation API completes, it invokes the function reference that you gave it. Since you gave it a reference to `showPosition`, it will invoke that function. It sounds like you might benefit from a more complete tutorial on asynchronous operations and callbacks, because you seem to be misunderstanding the concept. – David Aug 24 '15 at 13:39
(a callback is just another function. ANY function. `function pie() { alert('pies mmm!'); }` can be used as a callback. By doing `getCurrentPosition(showPosition)` you tell JavaScript to `call` `showPosition` when it's done getting the current position and you turn `showPosition` into a callback :}. In `showPosition` you could call another function... that does things with lat. – Terry Seidler Aug 24 '15 at 13:41

score -1 · Answer 2 · answered Aug 24 '15 at 13:24

-1

You are passing function reference instead of calling that function.

var position = navigator.geolocation.getCurrentPosition();
showPosition(position);

answered Aug 24 '15 at 13:24

Justinas

41,402
5
66
96

3

showPosition is the success callback, which takes a Position object as its parameter. That part of the code is actually correct :) (https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) – Terry Seidler Aug 24 '15 at 13:28

Javascript with callbacks

2 Answers2