javascript - SetTimeout inside SetTimeout not firing -
i trying create button gives feedback action performing. in angular, making put request server - @ point change button's state indicate - when receive response, change button's state again reflect success or failure 1.5 seconds , reset before button clicked. @ point message displayed reflect success or failure , after 5 seconds additional action should performed. message displaying should hidden if it's failure , page should redirect if success. it's last part not getting work.
my question whether should able put settimeout inside settimeout?
here code (inside function 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 , icon of reset button 1.5 sec var $el = $("#resetpassword"); var resetbutton = 1500; var resetmessage = 5000; var originalcolor = $el.css("background"); var originalicon = $el[0].firstchild.classname; // first html element in button, <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 live example: greedy magpie (please keep in mind work in progress, not on site work.) click change password button...
winfow.settimeout executed outside of angular digest cycle, view not updated. either add scope.$apply()
after scope.showfailedmessage = false;
or use $timeout
service instead of settimeout. second approach better.
check here $timeout service documentation: $timeout
Comments
Post a Comment