jquery定时器封装

最新推荐文章于 2022-03-31 13:48:37 发布

hua_ban_yu

最新推荐文章于 2022-03-31 13:48:37 发布

阅读量2.3k

点赞数 1

分类专栏： jquery 文章标签： jquery定时器 jq定时器定时器

本文链接：https://blog.csdn.net/hua_ban_yu/article/details/78676017

版权

jquery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前端开发很多时候都需要使用到定时器，定时器写法非常简单，只需要setTimeout()、clearTimeout()这两个方法就可以制作了。

定时器的停止时通过由 setTimeout() 返回的 ID 值进行取消，当页面有多个定时器时调用的又是同一个定时器方法就会存在定时器混乱，页面有多个定时器时停止定时器就是个难题，所以需要把定时器封装为一个方法，然后通过方法进行定时器的调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script>
			
			$(function(){
				var timeww = new timerFun("#showTime");// 创建定时器对象 ,设置定时器显示位置
				$("#btnStart").click(function(){ //启用定时器
					timeww.startFun();//启用定时器
				})
				$("#btnStop").click(function(){
					timeww.stopFun();//停止器定时器
				})
				
				
			})
			/*定时器*/
			var timerFun = function(obj){
				var timer; //设置定时器变量
				var times = 0; //定时器时间，默认从0开始
				//调用定时器
				this.startFun = function(){
					timerStart();
				}
				//停止定时器
				this.stopFun = function(){
					timerEnd()
				}
				//开始定时器
				var timerStart = function(){
					times ++; //时间自动加1;
					$(obj).val(times);//修改定时器显示内容
					//if(times<num){ //当时间小于指定的时间就执行定时器，否则就清除定时器
						timer = setTimeout(function(){
							timerStart();//执行开始定时器方法
						},1000);
					//}else{
					//	timerEnd(); //结束定时器方法；
					//}
				}
				
				//结束定时器
				var timerEnd= function(){
					//times = 0; //恢复定时器时间为0，让定时器从0开始计算;
					clearTimeout(timer); //清除定时器
					//timerStart();//执行开始定时器方法
				}
			}
			
		</script>
	</head>
	<body>
		定时器：<input type="text" class="" id="showTime" />
		<input type="button" name="btnStart" id="btnStart" value="开始计时" />
		<input type="button" name="btnStop" id="btnStop" value="停止计时"/>
	</body>
</html>

hua_ban_yu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery定时器封装

前端开发很多时候都需要使用到定时器，定时器写法非常简单，只需要setTimeout()、clearTimeout()这两个方法就可以制作了。定时器的停止时通过由 setTimeout() 返回的 ID 值进行取消，当页面有多个定时器时调用的又是同一个定时器方法就会存在定时器混乱，页面有多个定时器时停止定时器就是个难题，所以需要把定时器封装为一个方法，然后通过方法进行定时器的调用。
复制链接

扫一扫