Angularjs asynchronous callback handling

Question

$scope.$watch('Status.statusId', function (data) {

    GetCustomerWiseRmTransfers();

    if (($scope.gridDisplayObjectList.length <= 0) || ($scope.Status && $scope.Status.statusId == 325) || ($scope.Status && $scope.Status.statusId == 326)) {
        $scope.IsApproveVisible = false;
        $scope.IsRejectVisible = false;
        $scope.IsSaveVisible = false;
    } else {
        $scope.IsSaveVisible = true;
    }

    if (!$scope.$$phase) $scope.$apply();
}, true);

In above code the $scope.$watch() function calls GetCustomerWiseRmTransfers() function .What I expected from $scope.$watch() function is after executing GetCustomerWiseRmTransfers() completely it will execute other statements in $scope.$watch() function .But I am wrong this case.

function GetCustomerWiseRmTransfers() {
    customerWiseRmTransferService.GetCustomerWiseRmTransfers({
        statusId: angular.toJson($scope.Status.statusId)
    }, function (data) {
        $scope.gridDisplayObjectList = data;

        for (var i = 0; i < $scope.gridDisplayObjectList.length; i++) {
            var fdate = ToJavaScriptDate($scope.gridDisplayObjectList[i].RequestedDate);
            $scope.gridDisplayObjectList[i].RequestedDate = fdate;
        }

        var inputs = document.getElementsByTagName('input');

        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].type.toLowerCase() == 'checkbox') {
                inputs[i].checked = false;
            }
        }

        if (!$scope.$$phase) $scope.$apply();
    });
};

Within GetCustomerWiseRmTransfers() function it has an AJAX call to another function.So After excecuting AJAX function it exits from the function and executes the statements in $scope.$watch() function. After complete executing all statements in $scope.$watch() ,then GetCustomerWiseRmTransfers() executes remainging Callback Function.

But what I want is after completely executing GetCustomerWiseRmTransfers() function,$scope.$watch() should execute remaining Statements.

Can somebody share your thoughts on this?

Very nearly duplicates [*How do I return the response from an asynchronous call?*](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) (or maybe it's not just near). — T.J. Crowder, Aug 23 '16 at 06:38

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

Modify GetCustomerWiseRmTransfers to accept a callback it calls when the ajax work is complete, or have it return a promise it resolves when the ajax work is complete, and use that callback/promise in the code in $watch.

Re

How can i modify to accept callback ?

See this question and its answers, which I found using the search [js] create callback.

Basically, you

Add an argument to your GetCustomerWiseRmTransfers
Call it from within the ajax completion callback
Pass a function to GetCustomerWiseRmTransfers when you call it, just like you do with $watch, setTimeout, an event handler, ...

So:

function GetCustomerWiseRmTransfers(callback) {
// Declare it ----------------------^
    // ...
        if (!$scope.$$phase) $scope.$apply();

        callback(); // <==== Call it
    });
};

And when calling it, move everything after the call to GetCustomerWiseRmTransfers in your $watch callback into the function you pass in:

GetCustomerWiseRmTransfers(function() {
    // ...everything that followed it in the $watch callback...
});

edited May 23 '17 at 10:27

Community

1
1

answered Aug 23 '16 at 06:37

T.J. Crowder

1,031,962
187
1,923
1,875

How can i modify to accept callback ?.. I am using angularjs. – Aslam Jiffry Aug 23 '16 at 06:56
@AslamJiffry: Have you looked for how to do that? There's [this question and its answers](http://stackoverflow.com/questions/2190850/create-a-custom-callback-in-javascript), for instance. (I just did a search; the fact one of those answers is mine is a bit of a coincidence. :-) ) – T.J. Crowder Aug 23 '16 at 06:59
Yes I did, I tried to use Queing functions according to order that need to execute using angular.But it didn't work. – Aslam Jiffry Aug 23 '16 at 07:05
@AslamJiffry: I have no idea what a "queening function" is, I'm afraid. But the answers in that link show exactly how to create a callback and call it. – T.J. Crowder Aug 23 '16 at 07:06
@AslamJiffry: I've updated the answer to fold some of the linked content in. I'm trying not to just write it for you, as you won't learn anything that way. – T.J. Crowder Aug 23 '16 at 07:11

Angularjs asynchronous callback handling

1 Answers1