How to assure that one out of 2 functions run first

Question

I have 2 functions bindclub() and displayevent(). I want to assure bindclub() to run first always.I have also tried to put both the functions in ng-init but it also does not assured to run bindclub() first

angular.module('app', []).controller("EventCtrl",EventController); 
EventController.$inject = ["$scope", "$http", "$window"]; 

function EventController($scope, $http, $window) {
     $scope.bindclub = function () {
            $http({
                url: '/Master/bindclub',
                method: 'post',

            }).then(function (response) {
                debugger
                $scope.clubidname = response.data;
            }, function () { alert("Error in binding club"); });
        }


        $scope.displayevent = function () {
            $http({
                url: '/Master/displayevent',
                method: 'post',

            }).then(function (response) {
                alert('Displayed');

            }, function () { alert('Error in display event'); });

        }
    $scope.bindclub ();
    $scope.displayevent ();
}

Possible duplicate of [How to trigger event in JavaScript?](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) — ultrajohn, Feb 19 '17 at 04:19

score 1 · Answer 1 · answered Feb 19 '17 at 04:16

1

Is the second event dependent on the first event? If yes then you may set it as a callback event of the first event, to ensure that it is triggered on the success of the first event.

answered Feb 19 '17 at 04:16

Yogesh Mistry

2,082
15
19

score 0 · Answer 2 · answered Feb 19 '17 at 04:19

The function bindclub is indeed being run before displayevent. But these two functions themselves make http calls which have callbacks. There is no guarantee to have the callbacks executed in the order you want.

The only work around I see is to call the other function inside of the callback in bindclub.

The other way is for you to chain the callbacks.

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

You can attach displayEvent to a custom event that is triggered inside the bindEvent callback.

Check out this SO post for example on how to do this.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 19 '17 at 04:24

ultrajohn

2,527
4
31
56

score 0 · Accepted Answer · answered Feb 19 '17 at 04:26

use callback function wait until bindclub function executing and then start displayevent function

angular.module('app', []).controller("EventCtrl", EventController);
    EventController.$inject = ["$scope", "$http", "$window"];

    function EventController($scope, $http, $window) {
        $scope.bindclub = function(callback) {
            $http({
                url: '/Master/bindclub',
                method: 'post',
            }).then(function(response) {
                debugger
                $scope.clubidname = response.data;
                callback() // callback function
            }, function() {
                alert("Error in binding club");
                callback()// callback function
            });
        }
        $scope.displayevent = function() {
            $http({
                url: '/Master/displayevent',
                method: 'post',
            }).then(function(response) {
                alert('Displayed');
            }, function() {
                alert('Error in display event');
            });
        }
        $scope.bindclub(function() {
            $scope.displayevent(); // this execute after bindclub fucntion
        });
    }

score 0 · Answer 5 · answered Feb 19 '17 at 07:09

Return the promise and then chain them:

$scope.bindclub = function () {
    //vvvv RETURN httpPromise           
    return $http({
        url: '/Master/bindclub',
        method: 'post',

    }).then(function (response) {
        debugger
        $scope.clubidname = response.data;
    }, function () { alert("Error in binding club"); });
}

//CHAIN them
$scope.bindclub()
  .then(function () {
      $scope.displayevent();
});

Since the $http service returns a promise, the second operation can be chained from the first operation with the .then method of the first promise.

How to assure that one out of 2 functions run first

5 Answers5