setInterval遇到的问题

最新推荐文章于 2024-06-17 13:19:12 发布

rockets311

最新推荐文章于 2024-06-17 13:19:12 发布

阅读量1.5k

点赞数

分类专栏： web前端文章标签： html button function div 浏览器 null

本文链接：https://blog.csdn.net/cxb_phoenix/article/details/7189886

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于setInterval的作用以及它和setTimeout的区别就不多说了，这里只提醒两点：

1：setInterval参数中的那个函数的写法，加引号和不加引号不仅仅是写法有区别，作用也是有所区别的，具体区别也不讲了，网上可以搜到。

2：对setInterval理解不深刻，导致遇到一个小麻烦，具体看代码：

(a)首先贴出错误的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Interval</title>
</head>
<body>
<input type="button" id="interval" value="interval" οnclick="one()">
<div id="info"></div>
</body>
<script>
var num = 0;
function one()
{
	document.getElementById("info").innerHTML = num ++;
	setInterval(one,1000);
}
</script>
</html>

运行一下，看效果，不仅达不到预期的效果，时间长了还可能导致浏览器崩溃。

(b)下面才是预期的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Interval</title>
</head>
<body>
<input type="button" id="interval" value="interval" οnclick="one()">
<div id="info"></div>
</body>
<script>
var timmer = null;
var num = 0;
function one()
{
	document.getElementById("info").innerHTML = num ++;
	if(null === timmer)
		timmer = setInterval(one,1000);
}
</script>
</html>

代码贴出来了，一切就都明了了。