How to apply delay on AngularJS

Question

I am using below code, In laravel blade

<div ng-show="displayErrorMsg" class="form-group m-b alert alert-danger">{{errorMsg}}

In angularjs controller

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Message not disappear after 2 second automatically as given.

But when I simply put alert("test"); or click anywhere message disappears. How to resolve this problem ?

Answer 1

Just inject $timeout in your controller and use this.

$timeout(function() { $scope.displayErrorMsg = false;}, 2000);

Also you can use $digest or $apply as below

setTimeout(function() {
    $scope.displayErrorMsg = false;
    $scope.$digest();
}, 2000);

setTimeout(function () {
  $scope.$apply(function(){
      $scope.displayErrorMsg = false;
  });
}, 2000);

Check here how these works,

http://www.sitepoint.com/understanding-angulars-apply-digest/

Answer 2

I usually need a function to wait a little bit for any reason, for testing purposes only. In Java, we can use the Thread.sleep(). However, In JavaScript I prefer to use a simple function I found here:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

It has been working for me in several scenarios, including AngularJS. But, please, remember that function shouldn't be used in production environments unless you know exactly what you're doing.

Answer 3

Example 1: setTimeout

var timerCount = function() {
    setTimeout(function () {
        $scope.displayErrorMsg = false;
        $scope.$apply(timerCount);
    }, 2000);
}

Example 2: $timeout

$timeout(function() { 
    $scope.displayErrorMsg = false;
}, 2000);

Answer 4

you can inject $timeout. Angular's warapper window.setTimeout method.

try this one :-

$timeout(function() { $scope.displayErrorMsg = false;}, 2000);

the structure of $timeout is synatx:- $timeout(fn,delay,invokeAny,pass)

fn- function that you want to delay

delay: - duration time

invokeAny: - it will set false by default otherwise it will call function fn within $apply block

pass : - it is optional parameter to execute the function.

Another Approach:-

setTimeout(function () {
  $scope.$apply(function(){
      $scope.displayErrorMsg = false;
  });
}, 2000);

the setTimeout method run out of Angular Context so we need to call $apply that will call $digest cycle because if we update $scope inside setTimeout Angular need to know $scope gets dirty.

Answer 5

try to use angular timeout,for more https://docs.angularjs.org/api/ng/service/$timeout

or How to change value after delay by using angularjs?

$timeout(function() { $scope.displayErrorMsg = false;}, 2000);

Answer 6

Improved solution 1 :

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
if (timer) $timeout.cancel(timer); // restart counter
timer = setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Solution 1 :

You can use $timeout :

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Solution 2 :

With setTimeout :

setTimeout(function () {
    $scope.$apply(function(){
        $scope.displayErrorMsg = false;
    });
}, 2000);

Answer 7

setTimeout is method of window object. So in order to access this function inject $window in controller. Then you can call any method like alert, confirm, setTimeout, setInterval etc.
Details https://docs.angularjs.org/api/ng/service/$window
Then You can write

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
$window.setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Answer 8

Synchronous solution:

const sleep = ( ms ) => {
    const end = +(new Date()) + ms;
    while( +(new Date()) < end ){ } 
}

Example:

(function() {
    console.log(+(new Date())); // 1527837689811
    sleep(1000);

    console.log(+(new Date())); // 1527837690813
    sleep(2000);

    console.log(+(new Date())); // 1527837692814
    sleep(3000);

    console.log(+(new Date())); // 1527837695814
    sleep(4000);

    console.log(+(new Date())); // 1527837699814
    sleep(5000);
})();