1. 定时器的介绍
定时器就是在一段特定的时间后执行某段程序代码。
2. 定时器的使用:
js 定时器有两种创建方式:
- setTimeout(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器
- setInterval(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)重复调用一个函数的定时器
setTimeout函数的参数说明:
- 第一个参数 func , 表示定时器要执行的函数名
- 第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
- 第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
javascript
<script>
function hello(){
alert('hello');
}
// 执行一次函数的定时器
setTimeout(hello, 500);
</script>
setInterval函数的参数说明:
- 第一个参数 func , 表示定时器要执行的函数名
- 第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
- 第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
javascript
<script>
function hello(){
alert('hello');
}
// 重复执行函数的定时器
setInterval(hello, 1000);
</script>
2. 清除定时器
js 清除定时器分别是:
- clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
- clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)
clearTimeout函数的参数说明:
- timeoutID 为调用 setTimeout 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout 所设定的定时执行操作。
javascript
<script>
function hello(){
alert('hello');
// 清除只执行一次的定时器
clearTimeout(t1)
}
// 执行一次函数的定时器
t1 = setTimeout(hello, 500);
</script>
clearInterval函数的参数说明:
- timeoutID 为调用 setInterval 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setInterval 所设定的定时执行操作。
javascript
<script>
function hello(){
alert('hello');
}
// 重复执行函数的定时器
var t1 = setInterval(hello, 1000);
function stop(){
// 清除反复执行的定时器
clearInterval(t1);
}
</script>
<input type="button" value="停止" onclick="stop();">
5. 小结
- 定时器的创建
- 只执行一次函数的定时器, 对应的代码是setTimeout函数
- 反复执行函数的定时器, 对应的代码是setInterval函数
- 清除定时器
- 清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
- 清除清除反复执行的定时器, 对应的代码是clearInterval函数