对象 - 定时执行 ¶

本文导航

定时重复
终止定时
定时执行一次

作者：KK
发表日期：2016.2.21

这不是属于对象的内容,但是为了准备下一节自定义对象要用到的知识所以...

实现定时执行代码有两个函数,分别是setInterval(每隔一段时间执行)和setTimeout(指定时间后执行一次,只一次!)

还有一个clearInterval函数可以终止上面两个函数的定时

定时重复 ¶

例子:

function test(){ alert('hi,又见面了!'); }  //函数只有一句代码,所以我偷懒直接写成一行

setInterval(test, 3000);

这样效果就是每3秒执行一次test函数,传给setInterval的第1个参数就是一个函数,名者函数名称,反正最终就是一个函数,而第2个参数就是间隔执行的毫秒数,上例中的3000就表示3000毫秒,也就是3秒

终止定时 ¶

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>定时执行学习</title>
<script type="text/javascript">
function startTimer(){
	定时器 = setInterval(
		function test(){ alert('hi,又见面了!'); },
		3000
	);
	//以上我把参数分成两行写而已
}

function stopTimer(){
	clearInterval(定时器);
}

var 定时器; //这个变量用于保存定时器以便清除, 定时器  只是按照程序用途理解而设定的一个变量名称,不代表什么工具,你给它起名 XXX 也行
</script>
</head>
<body>
	<button type="button" onclick="startTimer()">开始定时提示</button>
	<button type="button" onclick="stopTimer()">终止定时提示</button>
</body>
</html>

定时执行一次 ¶

其实只要将setInterval这个函数名换成setTimeout就行:

setTimeout(function(){ alert('3秒已过,我只执行1次,不会再骚扰你了'); }, 3000);

setTimeout的倒计时也是可以终止的

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>定时执行学习</title>
<script type="text/javascript">
function startTimer(){
	定时器 = setTimeout(
		function test(){ alert('Boom!'); },
		3000
	);
}

function stopTimer(){
	clearTimeout(定时器);
}

var 定时器;
</script>
</head>
<body>
	<button type="button" onclick="startTimer()">3秒后爆炸</button>
	<button type="button" onclick="stopTimer()">赶紧停下来!</button>
</body>
</html>