window对象提供了2个定时器方法:
settTimeout()和setInterval()
1.setTimeout()定时器
语法:
window.setTimeout(调用函数,[延迟的毫秒数]);
延迟时间可以省略,省略则为0
用于设置一个定时器,该定时器再定时器到期后执行调用函数
写法一:
<script>
setTimeout(
function () {
console.log("时间到了");
},
[2000]
); //window可以省略
</script>
写法二:
<script>
function callback() {
console.log("bomb");
}
setTimeout("callback()", 3000);
</script>
繁琐,不提倡
页面中可能有很多的定时器,我们经常给定时器家标识符(取名字)
setTimeout() 也叫回调函数
即等待时间结束,再调用函数
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="./imgs/1.jpg" alt="" class="ad" />
<script>
var ad = document.querySelector(".ad");
setTimeout(function () {
ad.style.display = "none";
}, 3000);
</script>
</body>
</html>
打开后页面显示出大大的海绵宝宝,3秒后消失
停止setTimeout()定时器
语法:
window.clearTimeout(timeoutID)
clearTimeout方法取消之前通过调用setTimeout()建立的定时器
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>点击停止定时器</button>
<script>
alert("爆炸计时ing");
var btn = document.querySelector("button");
var timer = setTimeout(function () {
//给定时器取名方便调用
alert("爆炸了");
}, 1000);
btn.addEventListener("click", function () {
clearTimeout(timer);
alert("小子,你成功阻止了爆炸,明天来毛利侦探事务所上班吧");
});
</script>
</body>
</html>
2.setInterval()定时器