CODEWITHSUNDEEP
javascriptangularjs
vedika shrivas
vedika shrivas

Reputation: 333

After complete execution of function call should execute following code

     $scope.selectSample = function (name) {
        $scope.getSample(); //GET REQUEST

        /*SOME CODE HERE*/

    };

Here, selectSample is click event ,First it should execute complete cycle of getSample() and THEN ONLY execute following code. Now, before completion of getSample() the other part of code is getting executed. Any solution on this?

Upvotes: 1

Views: 66

Answers (3)

Kent Dela Cruz Fueconcillo
Kent Dela Cruz Fueconcillo

Reputation: 686

try this

$scope.selectSample = function (name) {
        $scope.getSample(); //GET REQUEST
    };

$scope.getSample = function (){
    $scope.yoursomecode()
}

$scope.yoursomecode () {

}

Upvotes: 0

skdonthi
skdonthi

Reputation: 1442

Call GET request as a promise instead of $scope.function(), we must use $scope only for the functions interacting with view.

$scope.selectSample = function (name) {
 /* call GET request as promise instead of $scope */
    myService.getSample(uri).then(function(result){  // $scope.getSample(); GET REQUEST
          // after promise returns write your code
         /*SOME CODE HERE*/
    });
};

myService.getSample = function(uri) {
    return $http.get(uri).then(function (response) {
        return response.data; // return promise
    });
};

Upvotes: 1

vertika
vertika

Reputation: 1424

It will happen as javascript is asynchronous . There are various ways to handle this like : 1) Promises 2) Callbacks 3) Closures

I will give an example :

Example by Promise in your case:

var app = angular.module('myAngularApp', []);
app.controller('test', function ($scope,$q) {
var okToGreet= function(name){
  if(name=='Robin Hood'){
    return true;
  }else{
    return false;
   }

}
 $scope.getSample= function(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    deferred.notify('About to greet ' + name + '.');

    if (okToGreet(name)) {
      deferred.resolve('Hello, ' + name + '!');
    } else {
      deferred.reject('Greeting ' + name + ' is not allowed.');
    }
  }, 1000);

  return deferred.promise;
}


$scope.selectSample = function (name) {
        //GET REQUEST
var promise =  $scope.getSample('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});
        /*SOME CODE HERE*/

    };
    
    $scope.selectSample();

});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myAngularApp">
<div ng-controller="test">
   
</div>

</body>
</html>

Example by closure :

var rankings = ['A', 'B', 'C'];
 for (var i = 0, len = rankings.length; i < len; i++) {
   setTimeout(function() {
      console.log(i, rankings[i]);
   }, i * 1000);
 }

The idea is to print every name from the rankings array together with its index. To make the code asynchronous every print is delayed by one second from its predecessor. The output we get is, however, different than what we expected it to be

Output :

 3 undefined
 3 undefined
 3 undefined

As you can see, by the time the asynchronous block is executed, the loop is already ended, so the value of variable i is the one that stops the loop (3). How to prevent this behavior? The answer are closures, one of the most powerful features of Javascript; a closure can be seen as a retained scope for Javascript, a function that can have its own variables together with an environment where those variables are binded.

Let’s fix the previous example using closures:

var rankings = ['alice', 'bob', 'eve'];
for (var i = 0, len = rankings.length; i < len; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i, rankings[i]);
    }, i * 1000);
  })(i);
}

As you can see the setTimeout function is wrapped within a closure that has an i argument, whose value is passed at the end of closure definition and corresponds to the loop varialbe i. The output we get is the correct one:

0 'A'
1 'B'
2 'C'

I hope i was able to explain your issue.

Upvotes: 3

Related Questions