SetTimeout inside SetTimeout not firing

Question

I am trying to create a button which gives feedback to the action it is performing. In Angular, I am making a put request to the server - at which point I change the button's state to indicate this - then when I receive a response, I change the button's state again to reflect success or failure for 1.5 seconds and then reset it back to what it originally was before the button was clicked. Also at this point a message is displayed to reflect success or failure and after another 5 seconds an additional action should be performed. The message which was displaying should be hidden if it's a failure and the page should be redirect if it was success. It's this last part which I am not getting to work.

My question is thus whether I should be able to put a setTimeout inside another setTimeout?

Here is my code (inside the function for the button):

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

EDIT: Here is a live example: Greedy Magpie (Please keep in mind this is a work in progress, so not everything on the site will work.) Just click the change password button...

They are no problem with call a timeout inside a timeout. It's just function. that call an other function. — peernohell, Dec 16 '14 at 11:13
@peernohell that is what I thought, any idea why my second setTimeout isn't firing? — Ebbs, Dec 16 '14 at 11:26
possible duplicate of [AngularJS value won't change with setTimeout](http://stackoverflow.com/questions/23674590/angularjs-value-wont-change-with-settimeout) — hon2a, Dec 16 '14 at 11:41

score 1 · Accepted Answer · answered Dec 16 '14 at 11:41

winfow.setTimeout executed outside of the Angular digest cycle, so view not updated. Either add scope.$apply() after the scope.ShowFailedMessage = false; or use $timeout service instead of setTimeout. The second approach is better.

Check here for the $timeout service documentation: $timeout

SetTimeout inside SetTimeout not firing

1 Answers1