setTimeout not working in async code

Question

Following is my angular controller code -

$scope.visibility = true;
$http.get("/api/getempl").then(function(response){
    if (response.status == 200) {
        $scope.empData = response.data.data;
        (function(){
            setTimeout(function(){
                $scope.visibility = false;
            }, 4000);
        })();
    }
});

What I am trying is to show Loading Image till data not fetched and flagging $scope.visibility on response basis -

.col-md-12(ng-show="visibility")
  h1 LOADING
.col-md-12(ng-show="!visibility")
  // DATA IN TABLE

Now LOADING text is always visible as I am expecting once data fetched, after a delay show table data but its not working, let me know what I am doing wrong here.

Why not just show the data when it's available, what makes you think your users want to wait another 4 seconds ? — adeneo
– adeneo, Commented Sep 9, 2014 at 10:43
@adeneo actually when I am pouring the data in the table there is a little flickering for some time and then every thing sets..so I am making a delay..4 sec delay is just for the testing purpose — Trialcoder
– Trialcoder, Commented Sep 9, 2014 at 10:46

Narek Mamikonyan · Accepted Answer · 2014-09-09 10:45:30Z

2

use $timeout

Angular's wrapper for window.setTimeout. The fn function is wrapped into a try/catch block and delegates any exceptions to $exceptionHandler service.

$scope.visibility = true;
$http.get("/api/getempl").then(function(response){
    if (response.status == 200) {
        $scope.empData = response.data.data;

            $timeout(function(){
                $scope.visibility = false;
            }, 4000);

    }
});

answered Sep 9, 2014 at 10:45

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Narek Mamikonyan Over a year ago

$timeout is asynchron function , what you mean ?

Trialcoder Over a year ago

My bad ..I need to inject $timeout in my controller..thx +1 and green tick :)

friedi · Accepted Answer · 2014-09-09 10:59:42Z

1

Use $timeout instead of setTimeout:

$scope.visibility = true;
$http.get("/api/getempl").then(function(response){
    if (response.status == 200) {
        $scope.empData = response.data.data;
        $timeout(function(){
            $scope.visibility = false;
        }, 4000);
    }
});

See the working example: jsFiddle example

edited Sep 9, 2014 at 10:59

answered Sep 9, 2014 at 10:45

friedi

4,3601 gold badge15 silver badges19 bronze badges

1 Comment

Trialcoder Over a year ago

My bad ..I need to inject $timeout in my controller..thx +1

Collectives™ on Stack Overflow

setTimeout not working in async code

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related