JavaScript：定时器

1.setInterval( functionName,time )

定时器。传入两个参数，函数名字和间隔时间。如下代码将以1s为间隔不断调用show( )函数

<script type="text/javascript">
	var i = 1;
	function show(){
		alert(i++);
	}
	setInterval(show,1000);
</script>

2.setTimeout( functionName,time )

延时器。传入两个参数，函数名字和延时时间。如下代码将延时2s执行

<script type="text/javascript">
	var i = 1;
	function show(){
		alert(i++);
	}
	setTimeout(show,2000);
</script>

延时器只执行一次，延时的意义在于，等待2s再执行show( )函数。比如，将2000改成2，刷新浏览器，立即弹出alert；将2000改成10000，刷新浏览器，10秒后弹出alert。

3.定时器的开启、关闭

一个页面可以开启很多个定时器，关闭定时器时，必须指定关闭哪一个定时器；其实，每一个setInterval( )函数都会有一个返回值，作为该定时器的ID，比如 timer = setInterval(counting,100); 关闭时，只需要 clearInterval(timer);实例如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	#div1{
		width: 100px;
		height: 30px;
		font-size: 25px;
		text-align: center;
		background-color: gray;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var count = 1;
		var timer = null;
		var oDiv = document.getElementById('div1');
		var oBtn1 = document.getElementById("btn1");
		var oBtn2 = document.getElementById("btn2");
		function counting(){
			count += 1;
			oDiv.innerHTML = count;
		}
		oBtn1.onclick = function(){
			timer = setInterval(counting,100);
		}
		oBtn2.onclick = function(){
			clearInterval(timer);
		}
	}
</script>
<body>
	<div id="div1"></div>
	<input id="btn1" type="button" value = "开始定时"></input><br>
	<input id="btn2" type="button" value = "结束定时"></input>
</body>
</html>

效果

posted @ 2020-02-08 11:57  昨夜昙花  阅读(7)  评论(0)    收藏  举报