when variable is set then (wait until is set then execute)

Question

I want to execute a function as soon as a variable has been set (geoloaction['latitude']). I'm not sure if the following code is the right way to use deferreds. Unfortunately it doesn't work as I was hoping for.

$.when( geolocation['latitude'] ).then( function(){
            console.log( 'latitude = ' + geolocation['latitude'] );
        });

What is the best/correct way to wait until a variable has been set and then execute a function?

Can you not have a callback in your code just after where you set it? — Shardj, Aug 18 '17 at 10:43
@Shard 1. I'm not too familiar with callbacks. 2. I have two external services to load (GeoIP, Google Autocomplete API). I want to keep them separated in code. But the Google Autocomplete API function needs one variable from the GeoIP service, once the GeoIP service is fully loaded and has set the variables. I'm not sure if a callback would be the right solution. — Aleksandar, Aug 18 '17 at 10:44
Possible duplicate of [While variable is not defined - wait](https://stackoverflow.com/questions/7307983/while-variable-is-not-defined-wait) — Samuil Petrov, Aug 18 '17 at 10:48

score 0 · Answer 1 · answered Aug 18 '17 at 10:47

Wrong use of when:

var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();

$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
    console.log( v1 ); // v1 is undefined
    console.log( v2 ); // v2 is "abc"
    console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});

d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );

If you can't call a function on your code you can check the value with:

setInterval(function(){ 
  if(geolocation['latitude'] != undefined){
      console.log( 'latitude = ' + geolocation['latitude'] );
  }
}, 1);

Is there a way not to do it with intervals or timeouts. Maybe with an event listener? — Aleksandar, Aug 18 '17 at 11:02

Aleksandar · Accepted Answer · 2018-04-19T02:56:06.943

I didn't want to use a time interval loop since I thought there must be a more modern way to solve this. So I found another interesting solution on stackoverflow that lets me attach an event listener to a variable and execute my code once the variable is set.

https://stackoverflow.com/a/37403125/4688612

My solution now looks like this:

In my geolocation script I install a variable( latitude and longitude ) with an event listener.

geolocation = {
    latlonInternal: '',
    latlonListener: function(val) {},
    set latlon(val) {
        this.latlonInternal = val;
        this.latlonListener(val);
    },
    get latlon() {
        return this.latlonInternal;
    },
    registerListener: function(listener) {
        this.latlonListener = listener;
    }
}

In my Google Places Autocomplete API I register the listener and wait until the variable is set.

geolocation.registerListener( function(val){
            console.log( 'latitude = '  + val[0]);
            console.log( 'longitude = ' + val[1]);
        });

Once the geolocation service has retrieved the position it will update the geolocation variable and trigger the listener.

geolocation.lonlat = [ geoipResponse.location.latitude, geoipResponse.location.longitude ];

This way my code bases for GeoIP and Google Paces Autocomplete API are completely separated and nothing needs to be nested.

when variable is set then (wait until is set then execute)

2 Answers2