AngularJS停止定时器

最新推荐文章于 2021-04-02 16:35:26 发布
最新推荐文章于 2021-04-02 16:35:26 发布
阅读量229 收藏
点赞数
文章标签： javascript ViewUI

1、问题背景

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


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS停止定时器</title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			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();
				});
			}]);
		</script>
	</head>
	<body ng-app="intervalApp">
		<div ng-controller="intervalController">
			<button data-ng-click="startEvent()">开始</button>
			<button data-ng-click="stopClick()">停止</button>
			<button data-ng-click="resetEvent()">重置</button><br>
			<div>开始数据：{{startData}}</div><br>
			<div>结束数据：{{endData}}</div><br>
		</div>
	</body>
</html>

3、实现结果

（1）初始化


（2）点击开始


（3）点击停止


（4）点击重置



iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular结合$interval控制时间暂停和继续 完整版
zhuwang219的博客
01-05 3549
AngularJs 服务之$interval
php计时器 停止,AngularJS停止定时器
weixin_42480540的博客
04-01 147
1、问题背景设置一个定时器，给定两个变量startData和endData，计时开始后分别减去5和50；单击停止暂停定时器，重置后数据恢复到原来的数据。2、实现源码AngularJS停止定时器var app = angular.module("intervalApp",[]);app.controller("intervalController",["$scope","$interval",fun...
Angular定时器setInterval()
记录工作开发中遇到的技术难点，方便自己查看，也希望可以帮助到他人...
11-21 2246
1、开启定时器 // 时间工具库，方便时间格式化 import * as moment from 'moment'; timer = null; this.timer = setInterval(() => { console.log(moment(new Date()).format('YYYY-MM-DD HH:mm:ss') + ' 定时器正在执行...'); }, 5000); 2、关闭定时器 if (this.timer) { clearInterval(this.timer);
AngularJS停止定时器$interval
Inuyasha1121的专栏
06-20 4502
1、问题背景      设置一个定时器，给定两个变量startData和endData，计时开始后分别减去5和50；单击停止暂停定时器，重置后数据恢复到原来的数据。 2、实现源码 [html] view plain copy  print? >   html>       head>           meta charset="U
AngularJS中的定时器，以及定时器的移除
热门推荐
liwusen的博客
08-06 2万+
1.相比较于JS中setTimeInterval和setTimeout，angularJS中通过interval来实现定时器的效果，通过 interval来实现定时器的效果，通过timeout来实现时间延迟。$timeout //实现的是延迟执行 $interval //实现的是定时器的效果我们分别来看这两个服务（1）timeout timeout相当于JS原生里面的延迟执行，不同的是该服务的函数
AngularJS 支付倒计时功能实现思路
10-19
AngularJS的`$interval`服务用于创建一个定时器，每秒执行一次，直到倒计时结束。下面是一个示例代码片段： ```javascript // 获取订单信息，包括创建时间 $scope.order = Storage.get("order"); // 将创建时间...
AngularJS 验证码60秒倒计时功能的实现
10-19
最后，我们使用`$interval`服务来启动倒计时，参数分别为：执行的函数（`countdown`）、执行间隔（1000毫秒，即1秒）和重复次数（100，这里实际上只执行一次，因为我们希望在倒计时结束后停止）。 在AngularJS中，`...
AngularJS实现页面定时刷新
12-12
如果设置了具体的数字，当达到该次数后，定时器将自动停止。 例如，以下代码每1秒执行一次函数，总共执行10次： ```javascript var timer = $interval(function() { console.log('aaa'); }, 1000, 10); ``` ### ...
AngularJS中$interval的用法详解
11-23
`$interval` 第二个参数是执行函数，第三个参数（可选）是执行次数，如果提供了这个参数，那么定时器将在指定次数后自动停止。例如： ```javascript var timer = $interval(function() {}, 100, 10); ``` 上述代码...
AngularJS 监听变量变化的实现方法
12-07
如果一个新的`$watch`事件在延迟期间触发，我们会取消当前的定时器并重新设置，确保始终只响应最后一次变化。 此外，$watch还有两种工作模式：惰性（lazy）和即时（eager）。默认情况下，$watch是即时的，即在$...
AngularJS之定时器无法停止
牛栏山矿泉水
08-31 159
1、问题背景 AngularJS设置定时器后，再次点击按钮触发定时器，这时会出现：前一个定时器未停止，后一个定时器又启动了，导致出现多个定时器同时在运行。 2、问题源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS之定时器无法停...
angularjs定时任务的设置与清除
heartbeaty的专栏
08-19 2万+
设置定时任务，给定时任务起一个名字time_upd，为的是方便清理的时候直接调用名称。 var timeout_upd = $interval($scope.upd_data ,6000); 注意：设置的时候$interval(fn ,time);第一个参数fn 不能写“()”，只能写$scope.方法名称。第二个参数是定时执行的时间间隔，单位为毫秒。 清除定时任务： $sc
angularjs 移除定时器
你当像鸟飞往你的山~~
05-09 1314
作者：LoveEmperor_王子様 定时器与loadingview $ionicLoading.show({ template: '数据加载中...' });$scope.timer = $timeout( function () { $ionicLoading.hide(); }, 800); 移除定时器 $scope.$o
angularjs中循环定时器的三种方法
晨风暮舞
05-05 1万+
本文主要设计定时器的三种循环，模板自配 1、$interlval实现，比较简单和原生js的setInterval比较相似 var app = angular.module('myApp',[]); app.run(function($rootScope , $interval){ var img=["http://hdn.xnimg.cn/photos/hdn321/201306
angular for 停顿几秒后继续执行_史上最全打羽毛球后拉伸动作，让你打开全身所有筋节...
weixin_30008295的博客
12-15 143
若想免除令人闻风丧胆的运动伤害，各式各样的拉伸是少不了的。不过，人们虽已深植运动前暖身的观念，但对于和热身同样重要的运动后收操，却时常忽略。收操是「冷却 (cool down)」与「再伸展」的合称，今天我们主要探讨的，是运动后针对各个部位的静态伸展运动，不单打羽毛球的朋友适用，做其他运动的朋友也可根据自己的需要进行。1.肩胛伸展 (Scarf Stretch)这是个简单且有效的伸展动作, 特别是伸...
angular for 停顿几秒后继续执行_Angular 初体验
weixin_31968831的博客
12-11 599
事情起源当初一个简单的截屏然后推流出去的工具，这个工具当初我用winform简单实现了下，然后因公司业务，添加许多程序包，需要自动管理这些程序包，包含下载更新上传等，以及与后台交互，学生老师提醒，自动开关闭程序，自动推流等等功能。这些功能都有一些特点，大部分实现不能放在UI线程，但是各个功能对应中间状态都需要在UI上显示，导致相应函数不能分隔，回调也超多，需求几次急改后，导致后续需求引入很麻烦，并...
Pipe(管道)的一些理解
readlnh的博客
10-26 5760
Pipe(管道)的一些理解 管道的概念 管道是操作系统中常见的一种进程间通信方式，它使用于所有POSIX系统以及Windows系列产品。 管道也是unix ipc的最老形式，管道有两种限制： 数据自己读不能自己写 它们是半双工的。数据只能在一个方向上流动。 数据一旦被读走，便不在管道中存在，不可反复读取。 它们只能在具有公共祖先的进程之间使用。通常,一个管道由一个进程创建,然后该进程调用fork...
angular定时器启用与关闭
懿_51335316的博客
04-02 497
angularjs清楚定时器
最新发布
07-29
在AngularJS中清除定时器可以使用$interval服务的cancel方法。首先，你需要在控制器中创建一个定时器，并将返回的promise保存在一个变量中，例如： ``` var timer = $interval(function(){ // 定时执行的代码 }, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值