Web AppBuilder Custom Widget - Function Executing Sequence

Question

I am having a weired issue that func1(), which is coded in front of func2(), is executed after func2() in my custome widget.

The widget draws a buffer on a click event, and when a "Show Results" button is clicked, it counts the number of facilities within the buffer. Below is a code sample:

var totalFac = 0 // Store the total number of facilities globally
var globalGeometry = null; // Store the query geometry globally

onShowResultsClick: function() {
  totalFac = 0; // Initialize
  this.facLayer = new FeatureLayer("https://link/to/layer");
  var query = new Query();
  query.geometry = globalGeometry;
  this.facLayer.queryFeatures(query, function(result) {
    var features = result.features;
    totalFac = features.length;
    console.log(totalFac);
  });
  console.log(totalFac); // Executed first
},

The two console.log() functions are executed reversely. As totalFac is initialized as 0, the console shows 0 firstly. The the real value of totalFac is shown after the 0. In fact, if totalFac is initialized as 888, the console will show 888 firstly, then the real value. Apparently queryFeatures() is executed last, behind the second console.log().

How come that a function coded in front of the next function is executed afterwards?

Answer 1

The reason why the last console log (the one at the end of onShowResultsClick) executes first it that the first console log (the other one) is waiting for the query to be solved.

The queryFeatures function do a request to the server to obtain the features. In other words you are telling execute this code (the function you pass as a parameter) when the request is over. It is an asynchronous event, and because of that JavaScript continues executing the code till the request is complete (*)

(*) It is not exactly like this, I simplify to give you the idea. Roughly speaking, there is something call "event loop". Asynchronous events are not executed as soon as they end, instead there are executed in a determined step of the loop.