这两种定时器方法都会返回一个id,可以通过这个id来提前终止它们.
一次性定时器,只执行一次
一次性定时器
//推迟N毫秒执行一次函数,执行完之后,
//自动停止,也可以在未执行前手动停止.
var id;
function f5(){
//启动定时器,若想在未执行定时器
//前就将它停止,需要使用id
id = setTimeout(function(){
console.log("顶顶顶");
},3000);
}
function f6(){
//若定时器已经执行,则取消无效
//若定时器还未执行,则可以取消
clearTimeout(id);
}<input type="button" value="按钮5"
onclick="f5();"/>
<input type="button" value="按钮6"
onclick="f6();"/>
周期性定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#clock{
border:1px solid red;
width:200px;
text-align:center;
line-height:30px;
font-size:20px;
height:30px;
}
</style>
<script>
var id;
function start(){
//若id非空,则定时器已启动过,
//那么就不要再次启动了
if(id){
return;
}
id = setInterval(function(){
//获取当前客户端的时间
var d = new Date();
//获取本地格式的时间
var now = d.toLocaleTimeString();
//将时间写入clock
var p = document.getElementById("clock");
p.innerHTML = now;
},1000)
}
function stop(){
//id非空时定时器处于启动状态,
//此时停止它才有效.
if(id){
clearInterval(id);
//为了可以再次启动,将id清空
id=0;
}
}
</script>
</head>
<body>
<input type="button" value="开始"
onclick="start();"/>
<input type="button" value="暂停"
onclick="stop();"/>
<p id="clock">
</p>
</body>
</html>