Attempting to implement a button that provides feedback for its actions, I am faced with a challenge in Angular. After sending a put request to the server, the button's state changes to show this action. Upon receiving a response, the button's state is updated again to indicate success or failure for 1.5 seconds before returning to its original state. Additionally, a message displays the outcome and after 5 seconds, an additional action should occur - hiding the message on failure or redirecting the page on success. It is this final step that is proving difficult.
My query revolves around whether it is possible to nest a setTimeout inside another setTimeout.
This is the code snippet within the button function:
$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;
$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);
}
}
Edit: Check out the live example Greedy Magpie (Note: Work in progress, not all features may be functional.) Simply click on the change password button...