AngularJS weird flow

Question

I've 2 functions in the scope f1 and f2, and I call f2 in the middle of f1.I can't get why f2 is called at the end of f1.(f2 edits the view). For example, with

.....
$scope.f1 = function() {
   console.log("A");
   $scope.f2();
   console.log("C");
}

$scope.f2 = function() {
   console.log("B");
}

I get the output A C B

Why the procedural flow is not followed?In the real code, f2 manages the view.

Is something asynchronous (like an API call) happening in `f2`? — The Head Rush, Oct 01 '19 at 12:04
You have probably oversimplified the code because what is shown would not produce that result — charlietfl, Oct 01 '19 at 12:07
No, no ajax or asynchronous stuff is in the two functions ,just scope variables editing and dom manipulation. — Antonio Del Sannio, Oct 01 '19 at 12:08
Are you using setTimeout by any chance? this seems to be working, see below posted answer. — Sagar Agrawal, Oct 01 '19 at 12:15
You should share more code on what kind of changes you're doing in both the functions. — Sagar Agrawal, Oct 01 '19 at 12:17
Let's say that f2 manages asynchronous code, what should I do to force the code to run in a procedural way? — Antonio Del Sannio, Oct 01 '19 at 12:18
Please provide the actual code. The one currently provided will not produce the described output. — Philipp Meissner, Oct 01 '19 at 12:23
OK I'll post the code, but even if copy directly the f2 code in f1 the problem persists — Antonio Del Sannio, Oct 01 '19 at 12:25
The code is too wide, what it would be the right way to wait for f2 and then continue with f1? — Antonio Del Sannio, Oct 01 '19 at 12:45

score 1 · Answer 1 · answered Oct 01 '19 at 12:11

This seems to be working fine for me. See below JSFiddle: https://jsfiddle.net/sagarag05/gzvnsth0/4/

See attached screenshot below.

function TestController($scope) {

  $scope.func1 = function(){
    console.log('A');
    $scope.func2();
    console.log('C');
  }

  $scope.func2 = function() {
   console.log('B');
  }
  $scope.func1();
}

score 0 · Answer 2 · answered Oct 01 '19 at 12:20

0

The code produces A B C as expected.

$scope = {}
$scope.f1 = function() {
   console.log("A");
   $scope.f2();
   console.log("C");
}

$scope.f2 = function() {
   console.log("B");
}
$scope.f1();  //A B C

answered Oct 01 '19 at 12:20

georgeawg

48,608
13
72
95

AngularJS weird flow

2 Answers2