[英]SetTimeout inside SetTimeout not firing
我正在尝试创建一个按钮,以对其执行的操作提供反馈。 在Angular中,我向服务器发出放置请求-此时我更改按钮的状态以表明这一点-然后,当我收到响应时,我再次更改按钮的状态以反映成功或失败1.5秒钟,然后将其重置返回到单击按钮之前的原始状态。 同样,此时会显示一条消息以反映成功或失败,并且在另外5秒钟后,应执行其他操作。 如果失败,则应隐藏正在显示的消息,如果成功,则应重定向页面。 这是我不能开始的最后一部分。
因此,我的问题是我是否应该能够将setTimeout放入另一个setTimeout中?
这是我的代码(在按钮的功能内部):
$scope.resetPassword = function() {
$scope.ShowSuccessMessage = false;
$scope.ShowFailedMessage = false;
var querystring = $location.search();
var dataObject = { email1 : $scope.formEmail1, email2 : $scope.formEmail2, password1: $scope.formPassword1, password2: $scope.formPassword2, token: querystring.token };
var responsePromise = $http.put("/myurl/", dataObject, {});
// change colour and icon of reset button for 1.5 sec
var $el = $("#resetPassword");
var resetButton = 1500;
var resetMessage = 5000;
var originalColor = $el.css("background");
var originalIcon = $el[0].firstChild.className; // get first html element in the button, which is the <i>
$el[0].firstChild.className = "fa fa-circle-o-notch fa-spin";
responsePromise.success(function(dataFromServer, status, headers, config) {
$el.css("background", "#02c66c");
$el[0].firstChild.className = "fa fa-check-circle";
$scope.ShowSuccessMessage = true;
ResetButton($el, $scope, originalColor, originalIcon, resetButton, true, resetMessage);
});
responsePromise.error(function(dataFromServer, status, headers, config) {
$el.css("background", "#d9534f");
$el[0].firstChild.className = "fa fa-times-circle";
$scope.ShowFailedMessage = true;
ResetButton($el, $scope, originalColor, originalIcon, resetButton, false, resetMessage);
});
};
ResetButton = function(el, scope, originalColor, originalIcon, resetButton, success, resetMessage)
{
setTimeout(function() {
el.css("background", originalColor);
el[0].firstChild.className = originalIcon;
ChangeMessageOrChangeLocation(scope, success, resetMessage);
}, resetButton);
}
ChangeMessageOrChangeLocation = function(scope, success, resetMessage)
{
if(success) {
setTimeout(function(){
window.location = '/signin';
}, resetMessage);
}
else {
setTimeout(function() {
scope.ShowFailedMessage = false;
}, resetMessage);
}
}
编辑:这是一个实时示例: Greyy Magpie (请记住,这是一个正在进行的工作,因此并非网站上的所有内容都可以使用。)只需单击更改密码按钮...
winfow.setTimeout在Angular摘要周期之外执行,因此视图未更新。 在scope.ShowFailedMessage = false;
之后添加scope.$apply()
scope.ShowFailedMessage = false;
或使用$timeout
服务代替setTimeout。 第二种方法更好。
在此处查看$ timeout服务文档: $ timeout
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.