解决js实现的计时器中的bug（两种方法）

最新推荐文章于 2024-04-20 22:50:15 发布

BalanceWei

最新推荐文章于 2024-04-20 22:50:15 发布

阅读量6k

点赞数

分类专栏：前端实用总结文章标签： js 计时器 bug 计时器按钮解决计时加快

本文链接：https://blog.csdn.net/qq_36793007/article/details/81513794

版权

前端实用总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天带来的是js中的计时器实现并解决bug，有两种方法解决bug，第一种是自我优化的，第二种是借鉴优化的。

首先来看看怎么实现计时器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计时器的实现</title>
	</head>
	<script type="text/javascript">
		var i = 0;//定义从0开始计数
		var x;//定义用来保存定时器
		function startcount(){//计数的方法
			document.getElementById("time").value = i;
			i++;
		    x = setTimeout("startcount()",1000);//不能加var
		}
		function stopcount(){
			clearTimeout(x);
		}
	</script>
	<style type="text/css">
		input {
			font-size: 20px;
			background-color: pink;
		}
	</style>
	<body>
		<form action="#" method="post" name="myform">
			<input type="text" name="time" id="time" value="" size="40" /><br />
			<input type="button" name="start" id="start" value="开始" onclick="startcount()"/>
			<input type="button" name="stop" id="stop" value="停止" onclick="stopcount()"/>
		</form>
	</body>
</html>

现在计时器是实现了，可以我们会发现一个问题，就点击开始计时之后，可以继续点击开始，这样会使得计数变快，这是因为每次调用都叠加了自加。

那怎么解决呢？

第一种方法：通过一个变量来控制按钮的点击次数

如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>从0开始</title>
	</head>
	<script type="text/javascript">
		var i = 0;//定义从0开始计数
		var x;//定义用来保存定时器
		var isstart = 1;//用来判断是否用户点击了开始
		function counttime(){//计数的方法
			document.getElementById("time").value = i;
			i++;
		    x = setTimeout("counttime()",1000);//不能加var
		}
		function startcount() {//当用户点击了开始之后，再次点击开始将无效
			if (isstart == 1) {
				isstart = 0;
				setTimeout("counttime()",1000);
			}
			
		}
		function stopcount(){
			isstart = 1;//当用户点击了停止之后，用户又可以继续点击开始
			clearTimeout(x);
		}
	</script>
	<style type="text/css">
		input {
			font-size: 20px;
			background-color: pink;
		}
	</style>

	<body>
		<form action="#" method="post" name="myform">
			<input type="text" name="time" id="time" value="" size="40" /><br />
			<input type="button" name="start" id="start" value="开始" onclick="startcount()"/>
			<input type="button" name="stop" id="stop" value="停止" onclick="stopcount()"/>
		</form>
	</body>

</html>

第二种方法：用户点击按钮之后使按钮不可用

如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var i = 0;//定义从0开始计数
		var x;//定义用来保存定时器
		function startcount(){//计数的方法
			document.getElementById("start").disabled = "disabled";
			document.getElementById("time").value = i;
			document.getElementById("stop").disabled = "";
			i++;
		    x = setTimeout("startcount()",1000);//不能加var
		}
		function stopcount(){
			document.getElementById("start").disabled = "";
			document.getElementById("stop").disabled = "disabled";
			isstart = 1;//当用户点击了停止之后，用户又可以继续点击开始
			clearTimeout(x);
		}
	</script>
	<style type="text/css">
		input {
			font-size: 20px;
			background-color: pink;
		}
	</style>
	<body>
		<form action="#" method="post" name="myform">
			<input type="text" name="time" id="time" value="" size="40" /><br />
			<input type="button" name="start" id="start" value="开始" onclick="startcount()"/>
			<input type="button" name="stop" id="stop" value="停止" onclick="stopcount()"/>
		</form>
	</body>
</html>

BalanceWei

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
解决js实现的计时器中的bug（两种方法）

今天带来的是js中的计时器实现并解决bug，有两种方法解决bug，第一种是自我优化的，第二种是借鉴优化的。首先来看看怎么实现计时器：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计时器的实现&lt;/title&gt; &lt;/h
复制链接

扫一扫