synchronous angularjs functions

Question

I have a big problem in making angularjs functions synchronously. I have tried promise and callback but none of them works.

initMap().then(function(result){
    console.log("in initMap");

    getLocation().then(function(result){
        console.log("getLocation");
        if(result){
            getPlaces.getData(map,myLatlng).then(function(data){
                Array = data;
                console.log("markersArray = ", markersArray);
            }).catch(function(){
                console.log('testtesttest');
            })
        }else{
            console.log("error in getLocation");
        }

    }).catch(function(){
        console.log("getLocationError");
    })
}).catch(function(error){
    console.log("bbbbb");
})

The function 'initMap()' has

{
    var defer = $q.defer();
    //Codes...
    defer.resolve(data);
    return defer.promise;
}

so as function 'getLocation' and .service'getPlaces'

However, they are all done asynchronously. The console printed as:

in initMap <-- 1
getLocation <-- 2
error in getLocation <-- 3

Number 1 should not be printed until the initMap() was resolved. So as number 2 and 3 should not be printed until getLocation was resolved, and checked that the result is false or true.

I am really at dead-end right now.

Please help. Any suggestions will do. Example code is really appreciated.

Thank you in advance.

Pawas

Edited: The code of each method are below.

Oh yeah. I am doing this on ionic platform. Is this affect the way the angularjs works? and how should I fix it if it does?

'initMap'

    var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapVar = new google.maps.Map(document.getElementById("map"), mapOptions);
    $scope.map = mapVar;

    console.log("initMap");     
    var defer = $q.defer();
    defer.resolve('initMap');
    return defer.promise;

'getLocation'

var defer = $q.defer();
var suc = false;

navigator.geolocation.getCurrentPosition(function(pos){
    myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
    $scope.map.setCenter(myLatlng);
    suc = true;

},function(error){
    suc = false;
},{
    timeout: 12000
});
defer.resolve(suc);
return defer.promise;

'getPlaces':

Sorry, this one I can't post the code.

in current situation what is happening, you only gave expected result.. could you also share code of initMap ,getLocation & getPlaces? — Pankaj Parkar
– Pankaj Parkar, Commented Jul 10, 2016 at 12:40
It looks like it's doing what it's supposed to, based on your description. One question: the resolved value from getLocation is handled as an error when true, is this the correct behavior? — Brian Schantz
– Brian Schantz, Commented Jul 10, 2016 at 12:43
Brian Schantz: I'm sorry I mistyped. but yeah, but in other way around. The 'getLocation' method has {... defer.resolve(success) ...} to return whether it can get the location or not — Pawas Lerdkijrachapong
– Pawas Lerdkijrachapong, Commented Jul 10, 2016 at 12:55

jobou · Accepted Answer · 2016-07-10 13:24:47Z

3

Your problem is that you resolve the promise before returning it.

var defer = $q.defer(); <-- create the promise
defer.resolve('initMap'); <-- resolve it
return defer.promise; <-- returns a resolved promise

So your call to .then is immediately executed. Same thing in getCurrentPosition, you are resolving your promise always with the value false

var defer = $q.defer();
var suc = false;

// Here, this is a callback executed asynchronously. So the code continue to executes
navigator.geolocation.getCurrentPosition(function(pos){
    myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
    $scope.map.setCenter(myLatlng);
    suc = true;

},function(error){
    suc = false;
},{
    timeout: 12000
});

// This is resolve with the value false from the initialization of the variable above
defer.resolve(suc);
// Always returns a resolved promise with the value false
return defer.promise;

The first part of your code seems to be synchronous. Creating a Google map object is executed synchronously. You can transform it in a promise but it is kind of useless.

For the getLocation, move the resolve inside the asynchronous callback.

var defer = $q.defer();
var suc = false;

navigator.geolocation.getCurrentPosition(function(pos){
    myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
    $scope.map.setCenter(myLatlng);
    suc = true;
    defer.resolve(suc);

},function(error){
    suc = false;
    defer.reject(suc);
},{
    timeout: 12000
});


return defer.promise;

answered Jul 10, 2016 at 13:24

jobou

1,8632 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pawas Lerdkijrachapong Over a year ago

God! I don't know how can I thank you. It really is frustrated. (T T) Thanks you so much.

Collectives™ on Stack Overflow

synchronous angularjs functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related