<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
</head>
<body>
<button onclick="startInterval()">开始Interval</button>
<button onclick="stopInterval()">停止Interval</button>
<button onclick="startTimeout()">正常Timeout定时器</button>
<button onclick="startTimeoutTwo()">循环的Timeout定时器</button>
<button onclick="stopTimeout()">停止Timeout</button>
<script>
var intervalBox;//interval定时器存储器
//设置interval定时器
function startInterval() {
clearInterval(intervalBox);//初始化interval定时器,防止定时器重叠
intervalBox = setInterval(function(){//设置interval定时器
console.log(intervalBox);//打印interval定时器,查看interval定时器效果
}, 1000);//定时器间隔时间1000ms
}
//结束interval定时器
function stopInterval() {
clearInterval(intervalBox);//清除interval定时器
}
var timeoutBox;//timeout定时器存储器
//设置正常的timeout定时器
function startTimeout() {
clearTimeout(timeoutBox);//初始化timeout定时器,防止定时器重叠
timeoutBox = setTimeout(function(){//设置timeout定时器
console.log(timeoutBox);//打印timeout定时器,查看timeout定时器效果
clearTimeout(timeoutBox);//清除当前timeout定时器,timeout定时器只运行一次代码,直接清掉它
// location.href="timer.html";//一段时间后跳转页面是setTimeout的常用场景之一
}, 1000);
}
//设置循环的timeout定时器
function startTimeoutTwo() {
clearTimeout(timeoutBox);//初始化timeout定时器,防止定时器重叠
timeoutBox = setTimeout(function(){
console.log(timeoutBox);//打印timeout定时器,查看timeout定时器效果
startTimeoutTwo();//循环调用函数自身,以达到循环的效果
}, 1000);
}
// 结束循环的timeout定时器
function stopTimeout() {
clearTimeout(timeoutBox);
}
</script>
</body>
</html>
07-06
3546
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
01-16
4056
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
12-12
08-20
1335
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)