今天学了定时器,特别好玩的一个东西!
定时器分为两种:
- 重复型定时器: 以指定的时间间隔,做同一件事,只要不停止,一直做下去.
- 延迟型定时器: 在指定的时间间隔后,做一件事,只做一次
重复型定时器
setInterval(fn, delay[, arg1, arg2...])
- fn: 要做的事情
- delay: 时间间隔 (单位: ms) 1s === 1000ms
- arg1, arg2...: 如果 fn 有参数,那么这些代表 fn 的参数
返回值:当前定时器的编号 (不同的浏览器这个编号是不一样的)
html5 的最新规范,规定了定时器最短的时间间隔是 4ms
延迟型定时器
setTimeout(fn, delay, arg1, arg2...)
参数和 setInterval 是一样的
返回值也是当前这个定时器的编号
清除定时器
- clearInterval(要清除的定时器的编号)
- clearTimeout(要清除的定时器的编号)
*
这 2 个方法的参数,无论你给它们什么样的数据类型,都不会报错.
写了一个小小的练习
html 代码效果预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100%;
height: 0;
background: blue;
}
</style>
</head>
<body>
<div></div>
<script>
var box = document.querySelector('div');
//添加延迟定时器,1s
setTimeout(function() {
//添加背景乡下展开定时器
var timer = setInterval(function(){
var h = box.offsetHeight + 1;
if( h > 600){
//大于600的时候就清除上一次的定时器,并添加一个定时器
clearInterval(timer);
//添加一个延迟定时器,1s
setTimeout(function(){
//给背景回去添加一个定时器
var timer2 = setInterval(function(){
var h = box.offsetHeight - 1;
if( h < 0 ){
//如果高度小于0,就停止定时器,终止函数
clearInterval(timer2);
return;
}
box.style.height = h +'px';
},0)
},1000);
}
box.style.height = h +'px';
},0);
}, 1000);
</script>
</body>
</html>
来源: http://www.qdfuns.com/notes/48009/633852ac48c64a00e48d880fbfb0a3ca.html