我有一个使用 AngularJS 和 Onsen/Monaca UI 开发的跨平台应用程序。
我有一个功能可以监视按钮点击的变化,如果在按钮上检测到一定数量的点击,用户将被带到确认屏幕。
但是,如果用户选择按钮的时间过长,则应将它们重定向到另一个屏幕(尚未定义)。
我试图用这个实现 $timeout 函数,但是一旦用户选择了正确的按钮次数,我似乎无法取消 $timeout 。如果用户在允许的时间内选择按钮,它们将被带到确认页面,但在 10 秒后仍显示 $timeout 消息。
下面是我的实现。可以假设一切正常——除了 stop() 函数中的 $timeout.cancel() 。
// Initialise
var timer;
// Watch for changes on button clicks
$scope.$watch('currentAction', function(newValue, oldValue) {
if (counter == 6) {
// User clicked buttons - cancel the timer
stop();
// Segue 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);
}
其中 Segue.goTo() 只是将用户转移到传入的页面(不相关但为了清楚起见包括在内)
var myFunctions = {
goTo: function (url) {
var nextPage = url;
var element = document.querySelector("ons-navigator");
var scope = angular.element(element).scope();
scope.myNavigator.pushPage(nextPage);
},
}
您正在创建timer
中$scope.$watch
,如果timer
被创建多次,并保持与只有一个变量,你只能取消的最新一个$timeout(timer)
。因此,解决方案应该是将计时器$timeout
移出$scope.$watch
数组或将计时器保留在数组中并循环数组以停止它们。
如果你仍然坚持使用 in $scope.$watch
,你应该在创建新的之前取消前一个。
if (timer) {
$timeout.cancel(timer);
}
timer = $timeout(function () {
alert("You are taking too long to respond");
}, 10000);
请参阅下面的代码片段。
timer
一旦 angular 端呈现页面,就会创建。timer
一旦将创建test
改变。angular.module("app", [])
.controller("myCtrl", function($scope, $timeout) {
var timer;
$scope.$watch('test', function(newValue, oldValue) {
console.log('$timeout created. value:' + newValue);
timer = $timeout(function() {
console.log('$timeout fired. value:' + newValue);
}, 5000);
})
$scope.clickEvt = function() {
console.log('$timeout canceld. currentValue:' + $scope.test);
$timeout.cancel(timer);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<input type="text" ng-model="test">
<button ng-click="clickEvt()">Stop<button>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句