[英]How to apply delay on AngularJS
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 ?
如何解决这个问题?
Just inject $timeout
in 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/
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().
在Java中,我们可以使用Thread.sleep()。 However, In JavaScript I prefer to use a simple function I found here :
但是,在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. 它在包括AngularJS在内的几种场景中一直在为我工作。 But, please, remember that function shouldn't be used in production environments unless you know exactly what you're doing .
但是,请记住,除非您确切知道自己在做什么,否则不应在生产环境中使用该功能 。
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);
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);
you can inject $timeout. 你可以注入$ timeout。 Angular's warapper window.setTimeout method.
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变脏了。
$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
if (timer) $timeout.cancel(timer); // restart counter
timer = setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);
You can use $timeout : 你可以使用$ timeout :
$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);
With setTimeout : 使用setTimeout:
setTimeout(function () {
$scope.$apply(function(){
$scope.displayErrorMsg = false;
});
}, 2000);
setTimeout is method of window object. setTimeout是window对象的方法。 So in order to access this function inject $window in controller.
所以为了访问这个函数,在控制器中注入$ window 。 Then you can call any method like alert, confirm, setTimeout, setInterval etc.
然后你可以调用任何方法,如alert,confirm,setTimeout,setInterval等。
Details https://docs.angularjs.org/api/ng/service/$window 详情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);
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);
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.