我刚开始学习AngularJS，我的代码从0到10 都有问题
var myController = function ($scope) {
$scope.timer = 1;
$scope.count10 = function () {
setInterval(function () {
if (10 > $scope.timer) {
$scope.timer++;
}
else {
$scope.timer = 1;
};
$scope.$apply();
}, 1000);
};
};
我用创建了重置按钮
$scope.reset = function()
{
$scope.timer = 0;
}
请帮我停止按钮，非常感谢
这是您已经使用过的Window的setInterval((方法，要停止/清除它，您需要在重置方法中调用clearInterval.((方法。
请参阅下面的使用方法。
-
在变量中保持setInterval((，如：
var yourVar = setInterval(()=> { // your code here}, 1000); -
要清除/停止间隔，请调用clearInterval((方法，如：
clearInterval(yourVar);
对于您的问题，解决方案如下：
var myController = function ($scope) {
$scope.timer = 1;
var interval;
$scope.count10 = function () {
interval = setInterval(function () {
if (10 > $scope.timer) {
$scope.timer++;
}
else {
$scope.timer = 1;
};
$scope.$apply();
}, 1000);
};
$scope.reset = function()
{
$scope.timer = 0;
//Clear/Stop interval
clearInterval(interval);
}
};
由于您正在使用angular，我建议您使用angular本身的"$interval"服务
请参阅下面的使用方法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-interval-service-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="intervalExample">
<script>
angular.module('intervalExample', [])
.controller('ExampleController', ['$scope', '$interval',
function($scope, $interval) {
$scope.format = 'M/d/yy h:mm:ss a';
$scope.blood_1 = 100;
$scope.blood_2 = 120;
var stop;
$scope.fight = function() {
// Don't start a new fight if we are already fighting
if ( angular.isDefined(stop) ) return;
stop = $interval(function() {
if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
$scope.blood_1 = $scope.blood_1 - 3;
$scope.blood_2 = $scope.blood_2 - 4;
} else {
$scope.stopFight();
}
}, 100);
};
$scope.stopFight = function() {
if (angular.isDefined(stop)) {
$interval.cancel(stop);
stop = undefined;
}
};
$scope.resetFight = function() {
$scope.blood_1 = 100;
$scope.blood_2 = 120;
};
$scope.$on('$destroy', function() {
// Make sure that the interval is destroyed too
$scope.stopFight();
});
}])
// Register the 'myCurrentTime' directive factory method.
// We inject $interval and dateFilter service since the factory method is DI.
.directive('myCurrentTime', ['$interval', 'dateFilter',
function($interval, dateFilter) {
// return the directive link function. (compile function not needed)
return function(scope, element, attrs) {
var format, // date format
stopTime; // so that we can cancel the time updates
// used to update the UI
function updateTime() {
element.text(dateFilter(new Date(), format));
}
// watch the expression, and update the UI on change.
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
stopTime = $interval(updateTime, 1000);
// listen on DOM destroy (removal) event, and cancel the next UI update
// to prevent updating time after the DOM element was removed.
element.on('$destroy', function() {
$interval.cancel(stopTime);
});
}
}]);
</script>
<div>
<div ng-controller="ExampleController">
<label>Date format: <input ng-model="format"></label> <hr/>
Current time is: <span my-current-time="format"></span>
<hr/>
Blood 1 : <font color='red'>{{blood_1}}</font>
Blood 2 : <font color='red'>{{blood_2}}</font>
<button type="button" data-ng-click="fight()">Fight</button>
<button type="button" data-ng-click="stopFight()">StopFight</button>
<button type="button" data-ng-click="resetFight()">resetFight</button>
</div>
</div>
</body>
</html>