php计时器 停止,AngularJS停止定时器

本文展示了如何在AngularJS中创建一个定时器,该定时器在启动后会递减两个变量startData和endData,点击停止按钮可暂停定时器,而重置功能则会将数据恢复到初始值。代码包括了开始、停止和重置操作的实现,并确保在应用销毁时安全停止定时器。
摘要由CSDN通过智能技术生成

1、问题背景

设置一个定时器,给定两个变量startData和endData,计时开始后分别减去5和50;单击停止暂停定时器,重置后数据恢复到原来的数据。

2、实现源码

AngularJS停止定时器

var app = angular.module("intervalApp",[]);

app.controller("intervalController",["$scope","$interval",function($scope,$interval){

$scope.startData = 100;

$scope.endData = 1000;

var stopEvent;

$scope.startEvent = function(){

if(angular.isDefined(stopEvent)) return;

stopEvent = $interval(function(){

if($scope.startData > 50 && $scope.endData > 500)

{

$scope.startData = $scope.startData - 5;

$scope.endData = $scope.endData - 50;

}

else

{

$scope.stopClick();

}

},1000)

};

$scope.stopClick = function(){

if(angular.isDefined(stopEvent))

{

$interval.cancel(stopEvent);

stopEvent = undefined;

}

};

$scope.resetEvent = function(){

$scope.startData = 100;

$scope.endData = 1000;

};

$scope.$on("$destory",function(){

$scope.stopClick();

});

}]);

开始

停止

重置

开始数据:{{startData}}

结束数据:{{endData}}

3、实现结果

(1)初始化

38326efd67ac4ade6ae927783eecc1b1.png

(2)点击开始

d1054ca770e67744fb5557fb632caaa4.png

(3)点击停止

bc9f0a28908963e8db7758cb6311e4e9.png

(4)点击重置

65012b1f30e51febe40ad7567f573aee.png

以上就是的内容,更多相关内容请关注PHP中文网(www.php.cn)!

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值