Javascript strange execution order (loops etc.)

Question

I am having trouble understanding the order in which stuff is executed in javascript... It seems like it completely does not follow the order I am accustomed with from Java. Could anyone suggest on how to force right order?

I want the getRegisteredUsersList to complete first, which will provide the get AllUsersActivityCount with first argument, which is an array.

Then for each element of that array I want the getAllUsersActivityCount to perform countActivitiesForUser on it. Unfortunately this does not work as expected.

I have the following methods:

$scope.count = function(){
  var result = getAllUsersActivityCount(getRegisteredUsersList(),4);
  return result;

};



getRegisteredUsersList = function(){
  var url = "MY QUERY URL THAT RETURNS ARRAY OF USERS";
   $http.get(url).success(
     function(data, status, headers, config) {
       return data;
     }
   );
};


getAllUsersActivityCount = function(usersList,type){
  var sdf = new JsSimpleDateFormat("MMM d, yyyy");
  var date = sdf.format(new Date());
  var returnArray = [];

  for(var i=0;i<usersList.length;i++){
    var userid= usersList[i].userid;
    var name= usersList[i].name;

    returnArray.push({userid: userid, name: name, count: countActivitiesForUser(userid,type,date)});
    }
  return returnArray;
};


$scope.countActivitiesForUser = function(userid,type,date){
  var url =     "MY QUERY URL THAT RETURNS SINGLE NUMBERICAL VALUE";
  $http.get(url).success(
    function(data, status, headers, config) {
      return data;
    }
    );

};

You're running asynchronous code, which doesn't follow the regular flow, it'll execute when it can. Returned values in async code are useless, you can either use a callback or a promise pattern. Check this question http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Jun 05 '13 at 04:38
Also those `return data` statements won't return anything to the outer function... — elclanrs, Jun 05 '13 at 04:40
I think you're missing the point...See if you can find any "AJAX from scratch" tutorials on Google to understand the basic concepts. — elclanrs, Jun 05 '13 at 04:43
You're making Asynchronous requests (not Synchronous requests). Asynchronous will not wait (ie: no blocking). You need to figure out how to implement better callbacks. — Rob W, Jun 05 '13 at 04:47
Essentially, you need to call the functions which are "waiting" for a certain value INSIDE the callbacks (instead of calling functions which would trigger the callbacks) — , Jun 05 '13 at 04:51

score 1 · Answer 1 · answered Jun 05 '13 at 04:49

The problem is that in getRegisteredUserList, you perform an asynchronous call to $http.get(). When this is performed, a new thread executes a get() operation after which, the success() callback is executed.

1.) It is almost always the case that getRegisteredUsersList already finishes execution when the get() operation is done.

2.) It seems that you are expecting the "return data" statement to return something to getAllUsersActivityCount when in fact it won't work since "return data" is inside a callback function. (i.e. By the time your code reaches the "return data" statement, you are trying to return the value from the success callback instead of returning a value to the getRegisteredUsersList caller)

score 0 · Answer 2 · answered Jun 05 '13 at 04:54

What's causing the confusion is the ajax callback in your getRegisteredUsersList function.

getRegisteredUsersList = function(){
   var url = "MY QUERY URL THAT RETURNS ARRAY OF USERS";
   $http.get(url).success(
     function(data, status, headers, config) {
       return data;
     }
   );
};

If I rewrite it, it might make it a bit clearer. This code is functionally completely equivalent to your original function:

getRegisteredUsersList = function(){
   var url = "MY QUERY URL THAT RETURNS ARRAY OF USERS";
   var callbackFn = function(data, status, headers, config) {return data;}
   $http.get(url).success(callbackFn);
};

As you can see, the callbackFn line is just defining a function, not execting it. That function is then passed as a parameter into the $http.get() call - still not executing the function. The $http.get() is asynchronous, meaning it starts the ajax call and returns immediately. It still doesn't execute the callbackFn function. So getRegisteredUsersList() finishe executing, and the getAllUsersActivityCount() function executes next as you expect. When the ajax call finally completes (it could be milliseconds, seconds, minutes, hours - from a code point of view, there's no way to tell), then the callbackFn is executed - but the other functions have completely finished executing at this point, so there's no way to affect their return value.

Javascript strange execution order (loops etc.)

2 Answers2