Pawas Lerdkijrachapong Pawas Lerdkijrachapong - 5 months ago 47
AngularJS Question

synchronous angularjs functions

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.

Answer

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;