Delay liquid page render until after Ajax returns data

Question

I am using Liquid and have access to both the server and client sides. I want to get the users location once and then according to the users location render different liquid elements. So hiding div's won't work. I actually need to delay the rendering for maybe a half second, until the country code is returned via Ajax. Then I can take it from there. I tried this but no luck, its not delaying the page render, its just delaying the logging of my message to the console.

<script>
   $(window).load(function () {
      setTimeout(function(){ console.log("waiting 2 secs..");
        },2000); // set the time here
    });

  jQuery.ajax( {
    url: '//freegeoip.net/json/',
    type: 'POST',
    dataType: 'jsonp',
    success: function(location) {
      {% assign user_country = location.country_code %}
      console.log("Hey this is the country code " + location.country_code);
    }
  });
</script>

Answer 1

You shouldn't use jsonp as this is not a best practice.

As Sam points out, you can use done() :

jQuery.ajax({
    url: '//freegeoip.net/json/',
    type: 'POST',
    async: false,
    success: function(location) {
      {% assign user_country = location.country_code %}
      console.log("Hey this is the country code " + location.country_code);
    }
}).done(function() {
  // CODE HERE WILL ONLY RUN ONCE AJAX REQUEST IS COMPLETED
});