AngularJS之定时器无法停止-js教程-PHP中文网

首页

web前端

js教程

AngularJS之定时器无法停止

黄舟

Feb 18, 2017 pm 01:46 PM

1、问题背景

AngularJS设置定时器后，再次点击按钮触发定时器，这时会出现：前一个定时器未停止，后一个定时器又启动了，导致出现多个定时器同时在运行。

2、问题源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之定时器无法停止</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var app = angular.module("btnApp",[]);
			app.controller("btnCon",function($scope,$interval){
				$scope.count = 0;
				$scope.getDayTime = function(){
					var date = new Date();
					var year = date.getFullYear();
					var month = date.getMonth()+1;
					var day = date.getDate();
					var hour = date.getHours();
					var minute = date.getMinutes();
					var second = date.getSeconds();
					var thisTime = year+"-"+(month<10?"0"+month:month)+"-"+(day<10?"0"+day:day)+" "+(hour<10?"0"+hour:hour)+":"+(minute<10?"0"+minute:minute)+":"+(second<10?"0"+second:second);
					
					return thisTime;
				};
				$scope.dayTime = $scope.getDayTime();
				$scope.queryData = function(){
					var timer = $interval(function(){  
	                    $scope.count++;  
	                    console.log($scope.count);
	                },4000);
	                
	                $scope.$on("destroy",function(){
					   $interval.cancel($scope.timer);
					}); 
				};
			});
		</script>
	</head>
	<body ng-app="btnApp">
		<p ng-controller="btnCon">
			<button ng-click="queryData();">查询</button>
			<p>
				<label>{{count}}</label>
			</p>
		</p>
	</body>
</html>

登录后复制

3、问题结果

4、解决源码

5、解决结果

以上就是AngularJS之定时器无法停止的内容，更多相关内容请关注PHP中文网（www.php.cn）！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7328

Java教程

1626

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

如何在 iPhone 相机上设置定时器 Apr 14, 2023 am 10:43 AM

您可以在 iPhone 相机上设置多长时间的定时器？当您在 iPhone 的相机应用程序中访问定时器选项时，您将获得在两种模式之间进行选择的选项：3 秒 (3s)和10 秒 (10s)。当您手持 iPhone 时，您可以使用第一个选项从前置或后置摄像头快速自拍。第二个选项在场景中很有用，可以在远处将 iPhone 安装到三脚架上来点击合影或自拍。如何在 iPhone 相机上设置定时器虽然在 iPhone 相机上设置定时器是一个相当简单的过程，但具体操作方式因所使用的 iPhone 机型而异。

如何实现Workerman文档中的定时器功能 Nov 08, 2023 pm 05:06 PM

如何实现Workerman文档中的定时器功能Workerman是一款强大的PHP异步网络通信框架，它提供了丰富的功能，其中就包括定时器功能。使用定时器可以在指定的时间间隔内执行代码，非常适合定时任务、轮询等应用场景。接下来，我将详细介绍如何在Workerman中实现定时器功能，并提供具体的代码示例。第一步：安装Workerman首先，我们需要安装Worker

如何在Java中设置每日定时任务执行的定时器？ Dec 27, 2023 am 11:10 AM

Java定时器：如何设置每天定时执行任务？在日常的Java开发中，我们经常会遇到需要每天定时执行某个任务的需求。比如说每天凌晨1点执行数据备份任务，或者每天晚上8点发送日报邮件等等。那么在Java中，我们可以使用定时器来实现这样的功能。Java提供了多种定时器的实现方式，本文将介绍基于Timer和ScheduledExecutorService两种方式来设置

java定时器表达式是什么 Dec 27, 2023 pm 05:06 PM

定时器的表达式用于定义任务的执行计划。定时器的表达式是基于“在给定的时间间隔之后执行任务”的模型。表达式通常由两个部分组成：一个初始延迟和一个时间间隔。

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

定时器的工作原理是什么 Aug 16, 2023 pm 02:18 PM

定时器的工作原理可以分为硬件定时器和软件定时器两种类型。硬件定时器的工作原理是时钟信号源提供稳定的时钟信号作为计时器的基准。计数器从预设值开始计数，每当时钟信号到达时计数器递增。当计数器达到预设值时，定时器会触发一个中断信号通知中断控制器处理相应的中断服务程序。在中断服务程序中，可以执行一些预定的操作。软件定时器的工作原理是通过编程语言或系统提供的库函数或系统调用来实现的等等。

掌握Go语言文档中的time.NewTimer函数实现单次定时器 Nov 03, 2023 pm 02:19 PM

掌握Go语言文档中的time.NewTimer函数实现单次定时器，并附上具体代码示例。时间作为我们生活的基准，定时器是编程中非常常用的工具之一。在Go语言中，我们可以使用time包来处理时间相关的操作，其中NewTimer函数可以用于创建一个单次定时器。本文将介绍如何使用NewTimer函数来实现一个简单的单次定时器，并附上具体代码示例。在Go语言中，tim

如何在Java中设置定时执行每月任务？ Jan 11, 2024 pm 04:50 PM

Java定时器：如何设置每月定时执行任务？引言：在开发中，经常会遇到需要每月定时执行任务的场景，例如每月更新统计数据、定期发送报表等。Java提供了多种定时器实现方式，本文将介绍如何使用Java定时器来实现每月定时执行任务，并提供具体的代码示例。一、使用Timer类实现每月定时执行任务Timer类是Java提供的最基础的定时器类，通过它可以实现简单的定时任务

See all articles

AngularJS之定时器无法停止

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题