JS中的定时器分为两类:一类是计时结束执行一次的计时器,一类是每隔指定时间执行一次的计时器
一、执行一次的定时器
1、语法:
window.setTimeout(函数, 时间);
2、说明
- window可以省略
- 这个调用函数可以直接写函数,或者函数名
- 时间的单位是毫秒
- 因为定时器一般有很多,所以我们一般给定时器赋值一个标识符
3、案例:2秒后控制台输出时间到了
//写法一:直接将函数写到新参位置
var timer = setTimeout(function(){
console.log("时间到了")
}, 2000);
//写法二:也可以将函数声明到外面,将函数名传入即可
function fun(){
console.log("时间到了");
}
var timer = setTimeout(fun, 2000)
4、如何关闭定时器
clearTimeout(定时器名字);
//关闭了上面的定时器(可以给按钮绑定单击事件,只要在两秒内点击,控制台就不会输出时间到了)
clearTimeout(timer);
二、重复执行的定时器
1、语法
window = setInterval(函数, 时间)
2、说明
- window可以省略
- 这个调用函数可以直接写函数,或者函数名
- 时间的单位是毫秒
- 因为定时器一般有很多,所以我们一般给定时器赋值一个标识符
3、案例(每个2秒控制台输出滴滴滴)
//写法一
var timer = setInterval(function(){
console.log("滴滴滴");
}, 2000)
//写法二
function fun(){
console("滴滴滴");
}
var timer = setInterval(fun, 2000);
4、如何关闭
clearInterval(定时器名字)
//关闭以上定时器
clearInterval(timer);
三、案例
点击开始按钮控制台每隔2秒重复输出我爱你,点击停止按钮停止输出
<body>
<button id="btn1">开始</button>
<button id="btn2">停止</button>
<body>
<script type="text/javascript">
//获取开始按钮
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var timer = null;
//点击开始绑定事件
btn1.onclick = function(){
timer = setInterval(function(){
console.log("我爱你");
}, 2000)
}
//点击停止后事件
btn2.onclick = function(){
clearInterval(timer);
}
<script>
四、补充
上述定时器中的调用函数我们也称为回调函数 callback
需要等待时间,时间到了才回去调用这个函数,因此称为回调函数