Javascript callback async or sync functions nightmares

Question

I'm still not getting my head around what is happening here:

var app = {
    initialize: function() {
        this.bindEvents();
},
bindEvents: function() {
  function Trial() {
      var index = 0;
      var cat = [];

     function getwidget() {
          var id = get_name_value('salesperson');
          var password = 'password';
          console.log('trigger');
          if (id !== "") {
              var request = $.get('http://someplacesomewhere.com?test=' + id + '&password=' + password);
              request.success(function (data) {
                catalogue = $.parseJSON(data);
                if (catalogue.status === "error") {
                    alert(catalogue.message);
                } else {
                    .
                    .
                    do something
                    .
                    .
                    };

                    console.log('big');
                    return true;
                }
              });
              request.error(function (data, status) {
                alert("Error connecting to API:" + status);
              });
          }
          console.log('tiny');
          return false;
      }

   this.nextwidget = function() {
          var flipflop = false;
          catindex = catindex + 1;
          flipflop = getwidget();

          console.log(flipflop);
      };

One button press for nextwidget the console output appears to be going round in an odd fashion.

trigger -> (from getwidget)
tiny    -> (from getwidget but the failed path..? It shouldn't of failed and pretty sure it didn't)
false   -> (in the nextwidget)
big     -> (from getwidget and success)

So it appears it is running the getwidget then not doing a sync execution but async as it fails on the getwidget and then presents a false but at the same time also doing a correct run of the getwidget ????

I thought this way was sync and therefore all code should wait.... I'm really confuse how this callback and non callback works I've read a few things about it but I just want a simple do this and then do that as this is just a test code.

Thanks

`$.get()` is async, so the results are exactly as expected. What results do you *want* to get? — Reinstate Monica Cellio, May 30 '17 at 17:37
So the $.get is called but the code runs through as if it failed. That's annoying that code was taken from another app that doesn't seem to have any problems. What I want is to have the catalogue obtained and then to perform functions on it within the nextwidget function. I only want the result to fail or successed based on the $.get request. — Mako77, May 30 '17 at 17:40
Oh crap I see it now....I copied it but not quite the same way.Dame it.... so tired and hot! Thanks for the pointer spent hours starring at it..grrrrrr! — Mako77, May 30 '17 at 17:43
Still not working. I've adjust now but still not getting a sync run of code. Very annoying! — Mako77, May 30 '17 at 20:11
I think you're just not understanding how async functions work. The fact that you've even used the word `return` (in the way you've used it) shows that. Check this question and the answers... https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Reinstate Monica Cellio, May 30 '17 at 21:36

Javascript callback async or sync functions nightmares

0 Answers0