Javascript 如何在 AngularJS 上应用延迟

How to apply delay on AngularJS

提问by Rita

I am using below code, In laravel blade

我正在使用以下代码，在 laravel 刀片中

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

In angularjs controller

在 angularjs 控制器中

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

Message not disappear after 2 second automatically as given.

消息不会在 2 秒后自动消失。

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

但是当我简单地把 alert("test"); 或单击消息消失的任何地方。如何解决这个问题？

回答by GRESPL Nagpur

Just inject $timeoutin your controller and use this.

只需注入$timeout您的控制器并使用它。

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

Also you can use $digest or $apply as below

您也可以使用 $digest 或 $apply 如下

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/

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

回答by Almir Campos

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:

我通常需要一个函数出于任何原因等待一点，仅用于测试目的。在 Java 中，我们可以使用 Thread.sleep()。但是，在 JavaScript 中，我更喜欢使用我在这里找到的一个简单函数：

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.

它在几个场景中对我有用，包括 AngularJS。但是，请记住，除非您确切地知道自己在做什么，否则不应在生产环境中使用该函数。

回答by Banik

Example 1: setTimeout

示例 1：setTimeout

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

Example 2: $timeout

示例 2：$timeout

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

回答by Imtiaz Pabel

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

尝试使用角度超时，了解更多https://docs.angularjs.org/api/ng/service/$timeout

or How to change value after delay by using angularjs?

或如何使用 angularjs 在延迟后更改值？

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

回答by Pawan Kashyap

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

你可以注入 $timeout。Angular 的 warapper window.setTimeout 方法。

try this one :-

试试这个：-

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

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

$timeout 的结构是 Synatx:- $timeout(fn,delay,invokeAny,pass)

fn- function that you want to delay

fn- 要延迟的函数

delay: - duration time

延迟： - 持续时间

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

invokeAny: - 默认设置为 false 否则它将在 $apply 块中调用函数 fn

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

pass : - 它是执行函数的可选参数。

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.

setTimeout 方法用完了 Angular Context，所以我们需要调用 $apply 来调用 $digest 循环，因为如果我们在 setTimeout 中更新 $scope Angular 需要知道 $scope 变脏了。

回答by A-312

Improved solution 1 :

改进的解决方案1：

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

Solution 1 :

解决方案1：

You can use $timeout:

您可以使用$timeout：

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

Solution 2 :

解决方案2：

With setTimeout :

使用 setTimeout ：

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

回答by Jagajit Prusty

setTimeout is method of window object. So in order to access this function inject $windowin 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

setTimeout 是 window 对象的方法。所以为了访问这个函数，在控制器中注入$window。然后你可以调用任何方法，如alert、confirm、setTimeout、setInterval等。
详情https://docs.angularjs.org/api/ng/service/$window
然后你可以写

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

回答by Юрий Волос

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);
})();