I have a multi-platform app created using AngularJS and Onsen/Monaca UI.
In my app, I have a feature that detects button clicks and after a certain number of clicks, the user is directed to a confirmation screen. However, if the user takes too long to make the selections, they should be redirected to another screen (which has not been defined yet).
Although I am trying to use the $timeout function for this purpose, I am facing issues with canceling the timer once the right number of button clicks have been made by the user. Even after progressing to the confirmation page, the $timeout message continues to display after 10 seconds.
Below is the code implementation. It can be assumed that everything works correctly except for the $timeout.cancel() in the stop() function.
// Initialization
var timer;
// Watching for changes on button clicks
$scope.$watch('currentAction', function(newValue, oldValue) {
if (counter == 6) {
// User clicked buttons - cancel the timer
stop();
// Proceed to next page
Segue.goTo("confirmation.html");
}
else {
// Start the timer
timer = $timeout(function () {
alert("You are taking too long to respond");
}, 10000);
}
});
// Cancel the $timeout
function stop() {
$timeout.cancel(timer);
}
The Segue.goTo() function simply navigates the user to the specified page (not directly related but included for clarity)
var myFunctions = {
goTo: function (url) {
var nextPage = url;
var element = document.querySelector("ons-navigator");
var scope = angular.element(element).scope();
scope.myNavigator.pushPage(nextPage);
},
}